From d6c44fa342d1221f42a8d4f82889c70865b97b39 Mon Sep 17 00:00:00 2001
From: Osama Abdul Latif <62595605+OsamaAbdellateef@users.noreply.github.com>
Date: Wed, 28 Feb 2024 16:54:27 +0200
Subject: [PATCH] [DST-283]: Fix select component into small screens (#3772)

---
 .changeset/small-glasses-impress.md              | 5 +++++
 packages/components/src/Menu/Menu.test.tsx       | 2 +-
 packages/components/src/Overlay/Popover.test.tsx | 2 +-
 packages/components/src/Overlay/Popover.tsx      | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/small-glasses-impress.md

diff --git a/.changeset/small-glasses-impress.md b/.changeset/small-glasses-impress.md
new file mode 100644
index 0000000000..5be0ffbbdf
--- /dev/null
+++ 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
index e788a250ed..cbbd725931 100644
--- 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
index 1657be3d56..33df3c778a 100644
--- 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
index 304f1d18be..4a5eab9133 100644
--- 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}
             >