[DST-283]: Fix select component into small screens (#3772)

marigold-ui · Feb 28, 2024 · d6c44fa · d6c44fa
1 parent 7a5bc5f
commit d6c44fa
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/small-glasses-impress.md b/.changeset/small-glasses-impress.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+Fix Select component in small screens
diff --git a/packages/components/src/Menu/Menu.test.tsx b/packages/components/src/Menu/Menu.test.tsx
@@ -308,7 +308,7 @@ test('renders as tray', () => {
   const item = screen.getByText('Burger');
   // eslint-disable-next-line testing-library/no-node-access
   expect(item.parentElement?.parentElement?.className).toMatchInlineSnapshot(
-    `"!left-0 bottom-0 !mt-auto flex !max-h-fit w-full flex-col"`
+    `"!fixed !bottom-0 !left-0 !top-auto !max-h-fit w-full"`
   );
 });
 

diff --git a/packages/components/src/Overlay/Popover.test.tsx b/packages/components/src/Overlay/Popover.test.tsx
@@ -116,7 +116,7 @@ test('popover is small screen', () => {
   const popover = screen.getByTestId('popover');
 
   expect(popover.className).toMatchInlineSnapshot(
-    `"!left-0 bottom-0 !mt-auto flex !max-h-fit w-full flex-col"`
+    `"!fixed !bottom-0 !left-0 !top-auto !max-h-fit w-full"`
   );
   expect(popover).toBeInTheDocument();
 });
diff --git a/packages/components/src/Overlay/Popover.tsx b/packages/components/src/Overlay/Popover.tsx
@@ -51,7 +51,7 @@ const _Popover = forwardRef<HTMLDivElement, PopoverProps>(
               ref={ref}
               {...props}
               className={cn(
-                '!left-0 bottom-0 !mt-auto flex !max-h-fit w-full flex-col'
+                '!fixed !bottom-0 !left-0 !top-auto !max-h-fit w-full'
               )}
               UNSTABLE_portalContainer={portal as Element}
             >