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)));