feat: Refactor mobile navigation styles for improved layout and responsiveness

This commit is contained in:
2026-04-17 20:58:19 +02:00
parent 2068af106f
commit 88a67160f2
+16 -29
View File
@@ -711,31 +711,25 @@
width: 100%; width: 100%;
} }
.navbar-mobile-arranged .navbar-collapse { @media (max-width: 520px) {
display: block; .function-search-form {
} flex-direction: column;
}
.navbar-mobile-arranged .navbar-nav { .function-search-input,
flex-direction: column; .function-search-btn,
} .user-menu-btn,
.module-selector-bar .module-tab {
width: 100%;
}
body.nav-mobile-tight .function-search-form { .module-selector-bar .module-tabs {
flex-direction: column; flex-direction: column;
} }
body.nav-mobile-tight .function-search-input, .navbar-text {
body.nav-mobile-tight .function-search-btn, font-size: 0.88rem;
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> </style>
@@ -1468,13 +1462,6 @@
if (!navRoot || !navContainer) return; if (!navRoot || !navContainer) return;
const width = navContainer.clientWidth || window.innerWidth; const width = navContainer.clientWidth || window.innerWidth;
navRoot.classList.remove('nav-compact', 'nav-ultra-compact'); 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) { if (window.innerWidth < 992) {
return; return;