fix: update dropdown menu styling for small screens

mento-protocol · Sep 17, 2024 · 73d2843 · 73d2843
1 parent cbe40af
commit 73d2843
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/components/input/Select.tsx b/src/components/input/Select.tsx
@@ -23,7 +23,7 @@ export function Select({ value, optionValues, onChange, button, option, buttonLa
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute z-20 w-full py-1 mt-1 overflow-auto dark:bg-[#3F3F46] bg-white rounded-[8px] shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none border border-solid border-black">
+          <Listbox.Options className="absolute z-20 w-full py-1 mt-1 overflow-auto dark:bg-[#3F3F46] bg-white rounded-[8px] shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none border border-solid border-black sm:mobile-dropdown dropdown-menu">
             {optionValues.map((optionValue) => (
               <Listbox.Option
                 key={optionValue}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -214,3 +214,14 @@ Toasts
   --toastify-color-progress-warning: var(--toastify-color-warning);
   --toastify-color-progress-error: var(--toastify-color-error);
 }
+
+@media (max-width: 640px) {
+  .dropdown-menu {
+    position: fixed !important;
+    bottom: auto !important;
+    top: auto !important;
+    max-height: 25vh !important;
+    width: 48% !important;
+    z-index: 9999 !important;
+  }
+}