Refactor navbar and search form styles for improved layout: adjust flex properties and widths for better responsiveness

Web/templates/base.html

@@ -177,29 +177,79 @@
         }
 
         .navbar .container-fluid {
-            gap: 10px;
+            gap: 8px;
             /* Ensure container respects safe areas on all sides */
-            padding-left: max(env(safe-area-inset-left, 0), 16px);
-            padding-right: max(env(safe-area-inset-right, 0), 16px);
+            padding-left: max(env(safe-area-inset-left, 0), 12px);
+            padding-right: max(env(safe-area-inset-right, 0), 12px);
             padding-bottom: env(safe-area-inset-bottom, 0);
         }
         
         .navbar-brand {
             font-weight: bold;
-            font-size: 1.4rem;
+            font-size: 1.3rem;
+            padding-right: 10px;
+            white-space: nowrap;
+            flex-shrink: 0;
         }
         
         .navbar-brand::before {
             content: attr(data-icon);
-            margin-right: 8px;
+            margin-right: 6px;
         }
 
         .navbar-nav .nav-link {
-            font-size: 1rem;
+            font-size: 0.95rem;
             font-weight: 600;
-            padding: 0.6rem 0.85rem;
-            border-radius: 8px;
+            padding: 0.5rem 0.75rem;
+            border-radius: 6px;
             transition: padding .18s ease, font-size .18s ease;
+            white-space: nowrap;
+        }
+
+        /* iPad/Tablet responsive adjustments */
+        @media (max-width: 1024px) {
+            .navbar .container-fluid {
+                gap: 6px;
+                padding-left: max(env(safe-area-inset-left, 0), 10px);
+                padding-right: max(env(safe-area-inset-right, 0), 10px);
+            }
+            
+            .navbar-brand {
+                font-size: 1.1rem;
+                padding-right: 8px;
+            }
+            
+            .navbar-brand::before {
+                margin-right: 4px;
+            }
+
+            .navbar-nav .nav-link {
+                font-size: 0.85rem;
+                padding: 0.45rem 0.6rem;
+            }
+        }
+
+        /* Small phones responsive adjustments */
+        @media (max-width: 576px) {
+            .navbar .container-fluid {
+                gap: 4px;
+                padding-left: max(env(safe-area-inset-left, 0), 8px);
+                padding-right: max(env(safe-area-inset-right, 0), 8px);
+            }
+            
+            .navbar-brand {
+                font-size: 0.95rem;
+                padding-right: 6px;
+            }
+            
+            .navbar-brand::before {
+                display: none;
+            }
+
+            .navbar-nav .nav-link {
+                font-size: 0.75rem;
+                padding: 0.4rem 0.5rem;
+            }
         }
 
         .navbar.nav-compact .navbar-brand {
@@ -256,6 +306,7 @@
             align-items: center;
             margin-right: 10px;
             width: min(420px, 42vw);
+            min-width: 0;
         }
 
         .function-search-form {
@@ -263,10 +314,13 @@
             display: flex;
             gap: 6px;
             align-items: center;
+            min-width: 0;
         }
 
         .function-search-input {
-            width: 100%;
+            flex: 1 1 auto;
+            width: auto;
+            min-width: 0;
             min-height: 38px;
             border-radius: 10px;
             border: 1px solid rgba(255, 255, 255, 0.3);
@@ -287,6 +341,7 @@
         }
 
         .function-search-btn {
+            flex: 0 0 auto;
             min-height: 38px;
             border-radius: 10px;
             border: 1px solid rgba(255, 255, 255, 0.45);
@@ -489,9 +544,48 @@
                 margin-top: 4px;
             }
 
+            .navbar-collapse {
+                width: 100%;
+            }
+
+            .navbar-collapse > .d-flex {
+                width: 100%;
+                flex-direction: column;
+                align-items: stretch;
+                gap: 8px;
+            }
+
             .function-search-wrap {
                 width: 100%;
+                max-width: 100%;
                 margin: 8px 0 10px;
+                flex: 1 1 100%;
+            }
+
+            .function-search-form {
+                width: 100%;
+                max-width: 100%;
+                flex-wrap: nowrap;
+            }
+
+            .function-search-input {
+                width: auto;
+                min-width: 0;
+                flex: 1 1 auto;
+            }
+
+            .function-search-btn {
+                flex: 0 0 auto;
+                white-space: nowrap;
+            }
+
+            .navbar-text {
+                margin-right: 0 !important;
+                width: 100%;
+            }
+
+            .user-menu-wrap {
+                align-self: flex-start;
             }
 
             .navbar-nav .nav-item {
@@ -863,12 +957,12 @@
                     {% endif %}
                     {% if 'username' in session %}
                     {% if current_permissions.pages.get('my_borrowed_items', True) %}
-                    <li class="nav-item" data-nav-fixed="true">
+                    <li class="nav-item">
                         <a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}">Meine Ausleihen</a>
                     </li>
                     {% endif %}
                     {% if current_permissions.pages.get('tutorial_page', True) %}
-                    <li class="nav-item" data-nav-fixed="true">
+                    <li class="nav-item">
                         <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}">Tutorial</a>
                     </li>
                     {% endif %}
@@ -878,9 +972,7 @@
                         <a class="nav-link nav-priority-link {% if current_path == url_for('upload_admin') %}nav-active{% endif %}" href="{{ url_for('upload_admin') }}">➕ Hochladen</a>
                     </li>
                     {% endif %}
-                    
-
-                    <li class="nav-item">
+                    <li class="nav-item" data-nav-fixed="true">
                         <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
                             <span class="theme-icon-light" style="display: none;">☀️</span>
                             <span class="theme-icon-dark" style="display: none;">🌙</span>
@@ -892,15 +984,6 @@
                             Mehr Optionen
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="invMoreDropdown">
-                            {% if 'username' in session %}
-                            {% if current_permissions.pages.get('my_borrowed_items', True) %}
-                            <li><a class="dropdown-item" href="{{ url_for('my_borrowed_items') }}">Meine Ausleihen</a></li>
-                            {% endif %}
-                            {% if current_permissions.pages.get('tutorial_page', True) %}
-                            <li><a class="dropdown-item" href="{{ url_for('tutorial_page') }}">Tutorial</a></li>
-                            {% endif %}
-                            <li><hr class="dropdown-divider"></li>
-                            {% endif %}
                             {% if 'username' in session and (session.get('admin', False) or is_admin) and current_permissions.actions.get('can_manage_settings', True) %}
                             <li><h6 class="dropdown-header">Verwaltung</h6></li>
                             {% if current_permissions.pages.get('manage_filters', True) %}
@@ -993,12 +1076,12 @@
                     {% endif %}
                     {% if 'username' in session %}
                     {% if current_permissions.pages.get('my_borrowed_items', True) %}
-                    <li class="nav-item" data-nav-fixed="true">
+                    <li class="nav-item">
                         <a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}">Meine Medien</a>
                     </li>
                     {% endif %}
                     {% if current_permissions.pages.get('tutorial_page', True) %}
-                    <li class="nav-item" data-nav-fixed="true">
+                    <li class="nav-item">
                         <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}">Tutorial</a>
                     </li>
                     {% endif %}
@@ -1008,9 +1091,7 @@
                         <a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}">📖 Hochladen</a>
                     </li>
                     {% endif %}
-                    
-
-                    <li class="nav-item">
+                    <li class="nav-item" data-nav-fixed="true">
                         <button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
                             <span class="theme-icon-light" style="display: none;">☀️</span>
                             <span class="theme-icon-dark" style="display: none;">🌙</span>
@@ -1022,15 +1103,6 @@
                             Mehr Optionen
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="libMoreDropdown">
-                            {% if 'username' in session %}
-                            {% if current_permissions.pages.get('my_borrowed_items', True) %}
-                            <li><a class="dropdown-item" href="{{ url_for('my_borrowed_items') }}">Meine Medien</a></li>
-                            {% endif %}
-                            {% if current_permissions.pages.get('tutorial_page', True) %}
-                            <li><a class="dropdown-item" href="{{ url_for('tutorial_page') }}">Tutorial</a></li>
-                            {% endif %}
-                            <li><hr class="dropdown-divider"></li>
-                            {% endif %}
                             {% if 'username' in session and (session.get('admin', False) or is_admin) and current_permissions.actions.get('can_manage_settings', True) %}
                             <li><h6 class="dropdown-header">Bibliotheks-Verwaltung</h6></li>
                             {% if current_permissions.pages.get('library_loans_admin', True) %}
@@ -1608,8 +1680,15 @@
             const libraryNavList = document.getElementById('libraryNavList');
             const libNavOverflowAnchor = document.getElementById('lib-nav-overflow-anchor');
 
-            function initNavbarOverflow(navList, navOverflowAnchor) {
-                if (!navList || !navOverflowAnchor) return;
+            function initNavbarOverflow(navList, navOverflowAnchor, options) {
+                if (!navList) return;
+
+                const moreToggleId = options && options.moreToggleId ? options.moreToggleId : '';
+                const moreToggle = moreToggleId ? document.getElementById(moreToggleId) : null;
+                const moreControlItem = moreToggle ? moreToggle.closest('li.nav-item.dropdown') : null;
+                const moreMenu = moreControlItem ? moreControlItem.querySelector(':scope > ul.dropdown-menu') : null;
+                const moreLabelDefault = moreToggle ? moreToggle.textContent.trim() : 'Mehr Optionen';
+                const moreMenuOriginal = moreMenu ? moreMenu.innerHTML : '';
 
                 const navRoot = navList.closest('nav.navbar');
                 const navCollapse = navList.closest('.navbar-collapse');
@@ -1637,45 +1716,35 @@
                     return Array.from(navList.children).filter(function(li){
                         if (!(li instanceof HTMLElement)) return false;
                         if (!li.classList.contains('nav-item')) return false;
-                        if (li.id === navOverflowAnchor.id) return false;
+                        if (navOverflowAnchor && li.id === navOverflowAnchor.id) return false;
                         if (li.dataset.overflowControl === 'true') return false;
                         if (li.dataset.navFixed === 'true') return false;
+                        if (moreControlItem && li === moreControlItem) return false;
                         return li.style.display !== 'none';
                     });
                 }
 
                 function clearOverflowControls() {
-                    if (!navList) return;
-                    navList.querySelectorAll('[data-overflow-control="true"]').forEach(function(node){
-                        node.remove();
-                    });
+                    if (!moreMenu) return;
+                    moreMenu.innerHTML = moreMenuOriginal;
+                    if (moreControlItem) {
+                        moreControlItem.style.display = '';
+                    }
+                    if (moreToggle) {
+                        moreToggle.textContent = moreLabelDefault;
+                    }
                 }
 
                 function restoreAllNavItems() {
                     if (!navList) return;
                     navList.querySelectorAll('li.nav-item').forEach(function(li){
-                        if (li.id === navOverflowAnchor.id) return;
+                        if (navOverflowAnchor && li.id === navOverflowAnchor.id) return;
                         if (li.dataset.overflowControl === 'true') return;
                         li.style.display = '';
                     });
                     clearOverflowControls();
                 }
 
-                function createOverflowControl() {
-                    const li = document.createElement('li');
-                    li.className = 'nav-item dropdown';
-                    li.dataset.overflowControl = 'true';
-
-                    const toggleId = navOverflowAnchor.id + '-toggle';
-                    const menuId = navOverflowAnchor.id + '-menu';
-
-                    li.innerHTML =
-                        '<a class="nav-link dropdown-toggle" href="#" id="' + toggleId + '" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-controls="' + menuId + '">⋮ Weitere</a>' +
-                        '<ul class="dropdown-menu" aria-labelledby="' + toggleId + '" id="' + menuId + '"></ul>';
-
-                    return li;
-                }
-
                 function getNavCandidatePriority(item) {
                     if (!(item instanceof HTMLElement)) {
                         return -1;
@@ -1758,29 +1827,57 @@
 
                 function rebuildOverflowControl(hiddenSources) {
                     clearOverflowControls();
-                    if (!navList || !navOverflowAnchor || hiddenSources.length === 0) return;
-
-                    const control = createOverflowControl();
-                    const menu = control.querySelector('ul.dropdown-menu');
-                    const controlLink = control.querySelector(':scope > a.nav-link');
-                    if (controlLink) {
-                        controlLink.textContent = '⋮ Weitere (' + hiddenSources.length + ')';
-                    }
+                    if (!moreMenu || hiddenSources.length === 0) return;
 
+                    const overflowFragment = document.createDocumentFragment();
                     hiddenSources.forEach(function(source){
-                        appendSourceToOverflowMenu(source, menu);
+                        appendSourceToOverflowMenu(source, overflowFragment);
                     });
 
-                    const trailingDivider = menu.querySelector('li:last-child .dropdown-divider');
-                    if (trailingDivider) {
+                    const overflowWrap = document.createElement('div');
+                    overflowWrap.appendChild(overflowFragment);
+                    const trailingDivider = overflowWrap.querySelector('li:last-child .dropdown-divider');
+                    if (trailingDivider && trailingDivider.parentElement) {
                         trailingDivider.parentElement.remove();
                     }
 
-                    navList.insertBefore(control, navOverflowAnchor);
+                    const overflowEntries = Array.from(overflowWrap.childNodes);
+                    if (overflowEntries.length > 0) {
+                        const marker = document.createElement('li');
+                        marker.innerHTML = '<h6 class="dropdown-header">Ausgeblendete Navigation</h6>';
+                        const firstExistingNode = moreMenu.firstChild;
+                        moreMenu.insertBefore(marker, firstExistingNode);
+
+                        let insertAfter = marker;
+                        overflowEntries.forEach(function(node){
+                            moreMenu.insertBefore(node, insertAfter.nextSibling);
+                            insertAfter = node;
+                        });
+
+                        const divider = document.createElement('li');
+                        divider.innerHTML = '<hr class="dropdown-divider">';
+                        moreMenu.insertBefore(divider, insertAfter.nextSibling);
+
+                        if (moreToggle) {
+                            moreToggle.textContent = moreLabelDefault + ' (' + hiddenSources.length + ')';
+                        }
+                    }
+
+                    if (moreControlItem) {
+                        moreControlItem.style.display = '';
+                    }
                 }
 
                 function adaptNavbarByWidth() {
-                    if (!navList || !navOverflowAnchor) return;
+                    if (!navList) return;
+
+                    function isNavOverflowing(bufferPx) {
+                        const buffer = typeof bufferPx === 'number' ? bufferPx : 0;
+                        const collapseOverflow = navCollapse ? (navCollapse.scrollWidth > (navCollapse.clientWidth - buffer)) : false;
+                        const containerOverflow = navContainer ? (navContainer.scrollWidth > (navContainer.clientWidth - buffer)) : false;
+                        const listOverflow = navList.scrollWidth > (navList.clientWidth - buffer);
+                        return collapseOverflow || containerOverflow || listOverflow;
+                    }
 
                     applyCompactMode();
 
@@ -1793,8 +1890,9 @@
 
                     const hiddenSources = [];
                     let candidates = collectTopLevelNavSources();
+                    const overflowBuffer = 12;
 
-                    while (navList.scrollWidth > navList.clientWidth && candidates.length > 0) {
+                    while (isNavOverflowing(overflowBuffer) && candidates.length > 0) {
                         const toHide = pickNextNavItemToHide(candidates);
                         if (!toHide) {
                             break;
@@ -1806,8 +1904,9 @@
 
                     rebuildOverflowControl(hiddenSources);
 
+                    // One final pass in case the overflow menu label/count itself changed row width.
                     candidates = collectTopLevelNavSources();
-                    while (navList.scrollWidth > navList.clientWidth && candidates.length > 0) {
+                    while (isNavOverflowing(overflowBuffer) && candidates.length > 0) {
                         const toHide = pickNextNavItemToHide(candidates);
                         if (!toHide) {
                             break;
@@ -1845,12 +1944,12 @@
 
             // Initialize overflow control for inventory navbar
             if (navList && navOverflowAnchor) {
-                initNavbarOverflow(navList, navOverflowAnchor);
+                initNavbarOverflow(navList, navOverflowAnchor, { moreToggleId: 'invMoreDropdown' });
             }
 
             // Initialize overflow control for library navbar
             if (libraryNavList && libNavOverflowAnchor) {
-                initNavbarOverflow(libraryNavList, libNavOverflowAnchor);
+                initNavbarOverflow(libraryNavList, libNavOverflowAnchor, { moreToggleId: 'libMoreDropdown' });
             }
         })();
     </script>