rely on builtin Listbox positioning + z-index class

riverqueue · Sep 2, 2024 · 186153c · 186153c
1 parent 5118d31
commit 186153c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/RefreshPauser.tsx b/src/components/RefreshPauser.tsx
@@ -80,7 +80,10 @@ export function RefreshPauser(
           </div>
         )}
       </ListboxButton>
-      <ListboxOptions className="absolute right-0 top-full mt-3 w-32 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
+      <ListboxOptions
+        anchor="bottom end"
+        className="z-20 mt-3 w-32 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5"
+      >
         <div className="px-2 text-xs font-semibold leading-6 text-slate-500">
           Live Updates
         </div>

diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
@@ -85,7 +85,10 @@ export function ThemeSelector(
           )}
         />
       </ListboxButton>
-      <ListboxOptions className="absolute right-0 top-full mt-3 w-36 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
+      <ListboxOptions
+        anchor="bottom end"
+        className="z-20 mt-3 w-36 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5"
+      >
         {themes.map((theme) => (
           <ListboxOption
             key={theme.value}