Align dropdown to edge of screen on mobile (#416)

sillsdev · Nov 10, 2023 · bad0407 · bad0407
1 parent a4d728b
commit bad0407
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
@@ -9,15 +9,17 @@ A simple dropdown menu from DaisyUI.
     const dispatch = createEventDispatcher();
 </script>
 
-<div class="dy-dropdown">
+<!-- https://github.com/saadeghi/daisyui/discussions/2469 
+     how to make dropdown align with screen instead of label -->
+<div class="dy-dropdown max-sm:[position:unset]">
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <label tabindex="0" class="dy-btn dy-btn-ghost p-0.5 no-animation flex-nowrap">
         <slot name="label" />
     </label>
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <div
         tabindex="0"
-        class="dy-dropdown-content dy-menu drop-shadow-lg mt-2.5 bg-base-100 z-10"
+        class="dy-dropdown-content dy-menu drop-shadow-lg mt-2.5 bg-base-100 z-10 max-sm:absolute max-sm:start-1.5"
         class:min-w-[21rem]={cols == 6}
         class:min-w-[17.25rem]={cols == 5}
         style={convertStyle($s['ui.background'])}