feat: Enhance mobile navigation layout and styling for improved user experience

Web/templates/base.html

@@ -137,6 +137,10 @@
             z-index: 1900;
         }
 
+        .navbar .container-fluid {
+            gap: 10px;
+        }
+        
         .navbar-brand {
             font-weight: bold;
             font-size: 1.4rem;
@@ -538,22 +542,200 @@
         }
 
         @media (max-width: 768px) {
-            .module-selector-bar {
+            .navbar {
-                padding: 8px 12px;
+                border-bottom-left-radius: 14px;
+                border-bottom-right-radius: 14px;
+            }
+
+            .navbar .container-fluid {
+                align-items: flex-start;
+                flex-wrap: wrap;
+                padding-top: 0.2rem;
+                padding-bottom: 0.35rem;
+            }
+
+            .navbar-brand {
+                order: 1;
+                flex: 1 1 auto;
+                min-width: 0;
+                font-size: 1.08rem;
+                line-height: 1.1;
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                padding-top: 0.2rem;
+                padding-bottom: 0.2rem;
+            }
+
+            .navbar-toggler {
+                order: 2;
+                margin-left: auto;
+                flex: 0 0 auto;
+                align-self: flex-start;
+            }
+
+            .navbar-collapse {
+                order: 4;
+                width: 100%;
+                margin-top: 8px;
+                padding: 10px 10px 6px;
+                border-radius: 14px;
+                background: rgba(15, 23, 42, 0.18);
+                backdrop-filter: blur(10px);
+                -webkit-backdrop-filter: blur(10px);
+            }
+
+            .navbar-collapse.show,
+            .navbar-collapse.collapsing {
+                display: block;
+            }
+
+            .navbar-nav {
+                width: 100%;
+                align-items: stretch;
                 gap: 8px;
+                padding-top: 2px;
+            }
+
+            .navbar-nav .nav-item {
+                width: 100%;
+            }
+
+            .navbar-nav .nav-link {
+                width: 100%;
+                justify-content: flex-start;
+                min-height: 46px;
+                padding: 0.8rem 0.95rem;
+                border-radius: 12px;
+                background: rgba(255, 255, 255, 0.08);
+                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+            }
+
+            .navbar-nav .nav-link.nav-active,
+            .navbar-nav .nav-link.quick-link-pill,
+            .navbar-nav .nav-link.nav-priority-link {
+                background: rgba(255, 255, 255, 0.16);
+            }
+
+            .navbar-nav .nav-item.dropdown {
+                width: 100%;
+            }
+
+            .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle {
+                width: 100%;
+                justify-content: space-between;
+            }
+
+            .navbar-nav .dropdown-menu {
+                width: 100%;
+                margin-left: 0;
+                margin-top: 6px;
+                border-radius: 12px;
+            }
+
+            .module-selector-bar {
+                padding: 8px 10px;
+                gap: 8px;
+                flex-wrap: wrap;
             }
 
             .module-selector-bar .module-label {
                 display: none;
             }
 
+            .module-selector-bar .module-tabs {
+                width: 100%;
+                gap: 8px;
+            }
+
             .module-selector-bar .module-tab {
-                padding: 5px 12px;
+                width: 100%;
-                font-size: 0.9rem;
+                text-align: center;
+                padding: 8px 12px;
+                font-size: 0.92rem;
             }
 
             .module-separator {
-                height: 18px;
+                display: none;
+            }
+
+            .function-search-wrap {
+                order: 3;
+                width: 100%;
+                margin: 0;
+            }
+
+            .function-search-form {
+                width: 100%;
+                flex-wrap: nowrap;
+                gap: 8px;
+            }
+
+            .function-search-input {
+                flex: 1 1 auto;
+                min-width: 0;
+                min-height: 44px;
+            }
+
+            .function-search-btn {
+                flex: 0 0 auto;
+                min-height: 44px;
+                min-width: 72px;
+                white-space: nowrap;
+            }
+
+            .navbar-text {
+                order: 5;
+                width: 100%;
+                margin: 0 !important;
+                padding: 8px 10px;
+                border-radius: 12px;
+                background: rgba(255, 255, 255, 0.08);
+                text-align: center;
+            }
+
+            .user-menu-wrap {
+                order: 6;
+                width: 100%;
+                margin-right: 0 !important;
+            }
+
+            .user-menu-btn {
+                width: 100%;
+                min-height: 46px;
+                border-radius: 12px;
+                justify-content: center;
+            }
+
+            .dropdown-menu-end {
+                width: 100%;
+            }
+
+            .navbar-mobile-arranged .navbar-collapse {
+                display: block;
+            }
+
+            .navbar-mobile-arranged .navbar-nav {
+                flex-direction: column;
+            }
+
+            body.nav-mobile-tight .function-search-form {
+                flex-direction: column;
+            }
+
+            body.nav-mobile-tight .function-search-input,
+            body.nav-mobile-tight .function-search-btn,
+            body.nav-mobile-tight .user-menu-btn,
+            body.nav-mobile-tight .module-selector-bar .module-tab {
+                width: 100%;
+            }
+
+            body.nav-mobile-tight .module-selector-bar .module-tabs {
+                flex-direction: column;
+            }
+
+            body.nav-mobile-tight .navbar-text {
+                font-size: 0.88rem;
             }
         }
     </style>
@@ -1286,6 +1468,13 @@
                     if (!navRoot || !navContainer) return;
                     const width = navContainer.clientWidth || window.innerWidth;
                     navRoot.classList.remove('nav-compact', 'nav-ultra-compact');
+                    navRoot.classList.toggle('nav-mobile-arranged', window.innerWidth < 992);
+                    navRoot.classList.toggle('nav-mobile-tight', window.innerWidth < 520);
+
+                    if (document.body) {
+                        document.body.classList.toggle('nav-mobile-arranged', window.innerWidth < 992);
+                        document.body.classList.toggle('nav-mobile-tight', window.innerWidth < 520);
+                    }
 
                     if (window.innerWidth < 992) {
                         return;