assets/css/app.css

@@ -357,4 +357,16 @@
   }
 }
 
+/* ============================================
+   Collapsed Sidebar: User Menu Dropdown Richtung
+   ============================================ */
+
+/* Bei eingeklappter Sidebar liegt der Avatar-Button am linken Rand.
+   dropdown-end würde das Menü nach links öffnen (off-screen).
+   Stattdessen nach rechts öffnen (in den Content-Bereich). */
+#app-layout[data-sidebar-expanded="false"] .dropdown.dropdown-top > ul.dropdown-content {
+  right: auto !important;
+  left: 0 !important;
+}
+
 /* This file is for your main application CSS */

assets/js/app.js

@@ -228,6 +228,13 @@ document.addEventListener("DOMContentLoaded", () => {
   
   // Listen for changes to the drawer checkbox
   drawerToggle.addEventListener("change", () => {
+    // On desktop (lg:drawer-open), the mobile drawer must never open.
+    // The hamburger label is lg:hidden, but guard here as a safety net
+    // against any accidental toggles (e.g. from overlapping elements or JS).
+    if (drawerToggle.checked && window.innerWidth >= 1024) {
+      drawerToggle.checked = false
+      return
+    }
     const isOpen = drawerToggle.checked
     updateAriaExpanded()
     updateSidebarTabIndex(isOpen)

lib/mv_web/components/layouts.ex

@@ -54,7 +54,7 @@ defmodule MvWeb.Layouts do
         data-sidebar-expanded="true"
         phx-hook="SidebarState"
       >
-        <input id="mobile-drawer" type="checkbox" class="drawer-toggle" />
+        <input id="mobile-drawer" type="checkbox" class="drawer-toggle" phx-update="ignore" />
 
         <div class="drawer-content flex flex-col relative z-0">
           <!-- Mobile Header (only visible on mobile) -->