Refine navbar styles for improved responsiveness: adjust padding, gap, and font sizes for various screen sizes

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-left: max(env(safe-area-inset-left, 0), 12px);
-            padding-right: max(env(safe-area-inset-right, 0), 16px);
+            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;
+            padding: 0.5rem 0.75rem;
-            border-radius: 8px;
+            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 {
@@ -861,25 +911,11 @@
                         <a class="nav-link {% if current_path == url_for('home') %}nav-active{% endif %}" href="{{ url_for('home') }}">Artikel</a>
                     </li>
                     {% endif %}
-                    {% if 'username' in session %}
-                    {% if current_permissions.pages.get('my_borrowed_items', True) %}
-                    <li class="nav-item" data-nav-fixed="true">
-                        <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">
-                        <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 %}
-                    {% endif %}
                     {% if 'username' in session and current_permissions.pages.get('upload_admin', True) and current_permissions.actions.get('can_insert', True) %}
                     <li class="nav-item">
                         <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">
                         <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>
@@ -991,25 +1027,11 @@
                         <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}">Medien</a>
                     </li>
                     {% endif %}
-                    {% if 'username' in session %}
-                    {% if current_permissions.pages.get('my_borrowed_items', True) %}
-                    <li class="nav-item" data-nav-fixed="true">
-                        <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">
-                        <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 %}
-                    {% endif %}
                     {% if 'username' in session and current_permissions.actions.get('can_insert', True) and current_permissions.pages.get('library_admin', True) %}
                     <li class="nav-item">
                         <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">
                         <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>