fix(fuselage): Responsive CardControls

.changeset/purple-shirts-boil.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+Fixes the responsiveness of the card component by adding flex wrap to card controls such that it can accomodate multiple items without breaking the responsive behaviour

packages/fuselage/src/components/Card/Card.styles.scss

@@ -83,4 +83,16 @@ $card-hero-padding: lengths.padding(28);
     display: flex;
     align-items: center;
   }
+
+  &__controls {
+    flex-wrap: wrap;
+  }
+
+  &__horizontal &__controls {
+    flex-wrap: nowrap;
+
+    &--wrap {
+      flex-wrap: wrap;
+    }
+  }
 }

packages/fuselage/src/components/Card/CardControls.tsx

@@ -1,5 +1,13 @@
-const CardControls = ({ ...props }) => (
-  <div className='rcx-card__controls' {...props} />
-);
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+
+import Box from '../Box/Box';
+
+const CardControls = ({ ...props }) => {
+  const breakpoints = useBreakpoints();
+  const isMobile = !breakpoints.includes('sm');
+  return (
+    <Box rcx-card__controls rcx-card__controls--wrap={isMobile} {...props} />
+  );
+};
 
 export default CardControls;