diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
index d6d650c3c..323551780 100644
--- a/src/lib/components/Dropdown.svelte
+++ b/src/lib/components/Dropdown.svelte
@@ -9,7 +9,9 @@ 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" />
@@ -17,7 +19,7 @@ A simple dropdown menu from DaisyUI.
     <!-- 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'])}