Improve sheet container resiliency

packages/demo/src/components/demo/sheet.tsx

@@ -31,10 +31,19 @@ export const SheetDemo = () => {
             <SheetDescription>Sheet Description</SheetDescription>
           </SheetHeader>
           <SheetContent>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            <div className="w-full max-w-200">
+              <p>
+                This container with max-w-200 and w-full applied sets the width
+                of the element up to a certain point!
+              </p>
+              <br />
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.
+              </p>
+            </div>
           </SheetContent>
           <SheetFooter>
             <Button

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "Apache-2.0",
   "keywords": [
     "component library",

packages/ui/src/components/filter-dropdown/filter-dropdown.module.css

@@ -1,12 +1,12 @@
 @reference '../../theme/theme.module.css';
 
 .selector-button {
-  @apply min-w-32;
-  @apply justify-between;
+  @apply min-w-128;
+  @apply flex justify-between;
 }
 
-.selector-button-inner {
-  @apply flex items-center gap-1;
+.selector-button-content {
+  @apply flex w-full items-center gap-1 truncate;
 }
 
 .chevron-icon {

packages/ui/src/components/filter-dropdown/filter-dropdown.tsx

@@ -52,7 +52,7 @@ const FilterDropdown = ({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="tertiary" className={cn(styles['selector-button'], buttonClassName)}>
-          <span className={styles['selector-button-inner']}>
+          <span className={styles['selector-button-content']}>
             {label}
             {hasSelectedFilters && <Badge variant="primary">{selectedFilters.length}</Badge>}
           </span>

packages/ui/src/components/sheet/sheet.module.css

@@ -33,14 +33,14 @@
 .sheet-content--side-left {
   @apply border-r;
   @apply inset-y-0 left-0;
-  @apply h-full w-3/4 sm:w-1/3;
+  @apply max-w-3/4 min-w-1/3 h-full w-fit;
   @apply data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left;
 }
 
 .sheet-content--side-right {
   @apply border-l;
   @apply inset-y-0 right-0;
-  @apply h-full w-3/4 sm:w-1/3;
+  @apply max-w-3/4 min-w-7/8 md:min-w-1/4 md:max-w-screen h-full w-fit;
   @apply data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right;
 }
 
@@ -49,7 +49,7 @@
 }
 
 .sheet-header {
-  @apply flex shrink-0 items-center;
+  @apply flex w-fit w-full shrink-0 items-center;
   @apply gap-4 p-4;
   @apply text-left;
   @apply from-brand-primary/40 to-background border-b bg-gradient-to-r;
@@ -71,8 +71,7 @@
 }
 
 .sheet-footer {
-  @apply flex shrink-0 flex-col-reverse sm:flex-row sm:justify-end;
-  @apply sm:space-x-2;
+  @apply flex w-full min-w-fit shrink-0 flex-col-reverse gap-2 sm:flex-row sm:justify-end;
   @apply border-border border-t p-4;
 }