From 28e2ca6b01c0c4dc5207951052d93b2fbbbc5a63 Mon Sep 17 00:00:00 2001
From: "Konrad M." <github@0bs.de>
Date: Tue, 21 Apr 2026 21:54:26 +0200
Subject: [PATCH] fix(pwa): fix bottom nav safe-area padding causing extra gap
 on iOS

pwa.css safe-area padding-bottom rule and body::after fill-overlay commented out.
glass.css nav-bottom uses margin-bottom: 0 instead; --hidden state uses
translateY(100%) + negative margin so the bar disappears without leaving a gap.
layout.css removes redundant padding-bottom from .nav-bottom rule.
---
 public/styles/glass.css  | 5 ++++-
 public/styles/layout.css | 1 -
 public/styles/pwa.css    | 8 ++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/styles/glass.css b/public/styles/glass.css
index d0229e2..4a1ad14 100644
--- a/public/styles/glass.css
+++ b/public/styles/glass.css
@@ -345,8 +345,10 @@ textarea.form-input {
  * 17. Bottom-Nav Auto-Hide on Scroll
  * ================================================================ */
 .nav-bottom {
+  margin-bottom: 0;
   transition:
     transform var(--transition-base) var(--ease-out),
+    margin-bottom var(--transition-base) var(--ease-out),
     background-color var(--transition-fast),
     box-shadow var(--transition-fast);
   /* will-change: transform absichtlich weggelassen - auf iOS (WebKit) korrumpiert die
@@ -354,7 +356,8 @@ textarea.form-input {
 }
 
 .nav-bottom--hidden {
-  transform: translateY(calc(100% + var(--safe-area-inset-bottom)));
+  transform: translateY(100%);
+  margin-bottom: calc(-1 * (var(--nav-height-mobile)));
   pointer-events: none;
 }
 
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 884ca7b..51b3c9b 100755
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -131,7 +131,6 @@
   z-index: var(--z-nav);
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
-  padding-bottom: var(--safe-area-inset-bottom);
 }
 
 /* ── Items-Reihe ── */
diff --git a/public/styles/pwa.css b/public/styles/pwa.css
index a89c841..f964c84 100644
--- a/public/styles/pwa.css
+++ b/public/styles/pwa.css
@@ -33,9 +33,9 @@ body {
 /* ── Bottom Nav über der Gesture Bar ──
  * layout.css nutzt --safe-area-inset-bottom Token;
  * hier als Fallback direkt via env() */
-.nav-bottom {
+/*.nav-bottom {
   padding-bottom: env(safe-area-inset-bottom);
-}
+}*/
 
 /* Touch-Targets werden über tokens.css (--target-sm/md/lg) und
  * komponentenspezifische Styles gehandhabt - siehe Redesign Phase E.
@@ -84,7 +84,7 @@ nav,
    * Im Überlappungsbereich (Nav-Padding = Safe-Area) liegt die Nav darüber;
    * in einem eventuellen Spalt zwischen Nav-Unterkante und Displayrand liegt
    * body::after sichtbar - optisch identisch mit der Nav. */
-  body::after {
+/*  body::after {
     content: '';
     position: fixed;
     bottom: 0;
@@ -95,5 +95,5 @@ nav,
     backdrop-filter: var(--blur-md) saturate(180%);
     -webkit-backdrop-filter: var(--blur-md) saturate(180%);
     z-index: calc(var(--z-nav) - 1);
-  }
+  }*/
 }