From fdaf4471da51d25cd3dc12f04cb121e612e172c1 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sun, 5 Apr 2026 12:16:24 +0200
Subject: [PATCH] feat: Adjust navigation height and padding for improved
 layout and responsiveness

---
 frontend/src/app.css | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 93c78c1..2ec9efb 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -12,7 +12,9 @@
   --accent-dark: #0a5c43;
   --danger: #D85A30;
   --warn: #EF9F27;
-  --nav-h: 64px;
+  /* Höhe der eigentlichen Tab-Zeile (ohne Abstand/Home-Indicator) */
+  --nav-h: 56px;
+  --nav-pad-top: 8px;
   --header-h: 52px;
   --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
   --capture-content-max: 800px;
@@ -36,25 +38,35 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
   position: sticky; top: 0; z-index: 10;
 }
 .app-logo { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
-.app-main { flex: 1; overflow-y: auto; padding: 16px 16px calc(var(--nav-h) + 16px); }
+/* unten: Tab-Leiste + Abstand nach oben zur Leiste + Home-Indicator (iPhone) */
+.app-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 16px calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px);
+}
 
 .bottom-nav {
-  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
-  width: 100%; max-width: 600px;
-  height: var(--nav-h);
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 600px;
   display: flex;
-  align-items: stretch;
+  align-items: center;
   background: var(--surface);
   border-top: 1px solid var(--border);
   z-index: 20;
   overflow-x: auto;
-  overflow-y: hidden;
+  overflow-y: visible;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none;
   justify-content: flex-start;
   gap: 2px;
-  padding: 0 6px;
+  padding: var(--nav-pad-top) 6px env(safe-area-inset-bottom, 0px);
+  min-height: calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px));
+  height: auto;
   box-sizing: border-box;
 }
 .bottom-nav::-webkit-scrollbar {
@@ -73,7 +85,7 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
   text-decoration: none;
   font-weight: 500;
   transition: color 0.15s;
-  padding: 0 4px calc(4px + env(safe-area-inset-bottom, 0));
+  padding: 2px 4px 4px;
   box-sizing: border-box;
 }
 .nav-item span {