diff --git a/Web/templates/base.html b/Web/templates/base.html index 747e2a8..71e74ba 100755 --- a/Web/templates/base.html +++ b/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 { @@ -861,25 +911,11 @@ Artikel {% endif %} - {% if 'username' in session %} - {% if current_permissions.pages.get('my_borrowed_items', True) %} -