diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index b545339..95c5db3 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -55,7 +55,7 @@ function Nav({ isAdmin }) { 'nav-item' + (navItemActive(loc.pathname, item, isActive) ? ' active' : '') } > - + {item.shortLabel || item.label} ))} diff --git a/frontend/src/app.css b/frontend/src/app.css index de4db83..058430f 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -12,9 +12,9 @@ --accent-dark: #0a5c43; --danger: #D85A30; --warn: #EF9F27; - /* Höhe der eigentlichen Tab-Zeile (ohne Abstand/Home-Indicator) */ - --nav-h: 56px; - --nav-pad-top: 8px; + /* Höhe der Tab-Zeile (Icon + Beschriftung, ohne Home-Indicator) — an Mitai/iOS-Tabbar angelehnt */ + --nav-h: 58px; + --nav-pad-top: 10px; --header-h: 52px; --font: system-ui, -apple-system, 'Segoe UI', sans-serif; --capture-content-max: 800px; @@ -27,6 +27,9 @@ --text1: #eeecea; --text2: #aaa9a4; --text3: #686762; --accent-light: #04342C; --accent-dark: #5DCAA5; } + .bottom-nav { + box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.55); + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body, #root { height: 100%; } @@ -168,18 +171,21 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we width: auto; max-width: none; display: flex; - align-items: center; + align-items: stretch; background: var(--surface); border-top: 1px solid var(--border); + box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); z-index: 20; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; + scroll-snap-type: x proximity; + overscroll-behavior-x: contain; justify-content: flex-start; - gap: 2px; - padding: var(--nav-pad-top) max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px)); + gap: 4px; + padding: var(--nav-pad-top) max(10px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(10px, env(safe-area-inset-left, 0px)); min-height: calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px)); height: auto; box-sizing: border-box; @@ -189,25 +195,29 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we } .nav-item { flex: 0 0 auto; - min-width: 56px; - max-width: 96px; + min-width: 68px; + max-width: 108px; + min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 3px; + gap: 4px; color: var(--text3); text-decoration: none; - font-weight: 500; + font-weight: 600; transition: color 0.15s; - padding: 2px 4px 4px; + padding: 6px 10px 8px; box-sizing: border-box; + scroll-snap-align: center; + -webkit-tap-highlight-color: transparent; } .nav-item span { - font-size: 10px; - line-height: 1.15; + font-size: 11px; + line-height: 1.2; text-align: center; max-width: 100%; + letter-spacing: 0.01em; } .nav-item.active { color: var(--accent); } .nav-item svg { flex-shrink: 0; } @@ -1262,23 +1272,6 @@ a.analysis-split__nav-item { font-size: 0.8rem; } - /* Untere Hauptnavigation: etwas kompakter */ - .bottom-nav { - gap: 0; - padding-top: 5px; - } - - .nav-item { - min-width: 52px; - max-width: 90px; - padding: 1px 2px 3px; - gap: 2px; - } - - .nav-item span { - font-size: 9.5px; - } - .admin-page-subtabs { margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px)));