openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pwa): fix bottom nav safe-area padding causing extra gap on iOS

Browse Source 
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.
This commit is contained in:
Konrad M.
2026-04-21 21:54:26 +02:00
parent 25d2b42ba3
commit 28e2ca6b01
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/glass.css
+4 -1
View File
@@ -345,8 +345,10 @@ textarea.form-input {
* 17. Bottom-Nav Auto-Hide on Scroll * 17. Bottom-Nav Auto-Hide on Scroll
* ================================================================ */ * ================================================================ */
.nav-bottom { .nav-bottom {
margin-bottom: 0;
transition: transition:
transform var(--transition-base) var(--ease-out), transform var(--transition-base) var(--ease-out),
margin-bottom var(--transition-base) var(--ease-out),
background-color var(--transition-fast), background-color var(--transition-fast),
box-shadow var(--transition-fast); box-shadow var(--transition-fast);
/* will-change: transform absichtlich weggelassen - auf iOS (WebKit) korrumpiert die /* will-change: transform absichtlich weggelassen - auf iOS (WebKit) korrumpiert die
@@ -354,7 +356,8 @@ textarea.form-input {
} }
.nav-bottom--hidden { .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; pointer-events: none;
} }
public/styles/layout.css
-1
View File
@@ -131,7 +131,6 @@
z-index: var(--z-nav); z-index: var(--z-nav);
backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
padding-bottom: var(--safe-area-inset-bottom);
} }
/* ── Items-Reihe ── */ /* ── Items-Reihe ── */
public/styles/pwa.css
+4 -4
View File
@@ -33,9 +33,9 @@ body {
/* ── Bottom Nav über der Gesture Bar ── /* ── Bottom Nav über der Gesture Bar ──
* layout.css nutzt --safe-area-inset-bottom Token; * layout.css nutzt --safe-area-inset-bottom Token;
* hier als Fallback direkt via env() */ * hier als Fallback direkt via env() */
.nav-bottom { /*.nav-bottom {
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }*/
/* Touch-Targets werden über tokens.css (--target-sm/md/lg) und /* Touch-Targets werden über tokens.css (--target-sm/md/lg) und
* komponentenspezifische Styles gehandhabt - siehe Redesign Phase E. * komponentenspezifische Styles gehandhabt - siehe Redesign Phase E.
@@ -84,7 +84,7 @@ nav,
* Im Überlappungsbereich (Nav-Padding = Safe-Area) liegt die Nav darüber; * Im Überlappungsbereich (Nav-Padding = Safe-Area) liegt die Nav darüber;
* in einem eventuellen Spalt zwischen Nav-Unterkante und Displayrand liegt * in einem eventuellen Spalt zwischen Nav-Unterkante und Displayrand liegt
* body::after sichtbar - optisch identisch mit der Nav. */ * body::after sichtbar - optisch identisch mit der Nav. */
body::after { /* body::after {
content: ''; content: '';
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@@ -95,5 +95,5 @@ nav,
backdrop-filter: var(--blur-md) saturate(180%); backdrop-filter: var(--blur-md) saturate(180%);
-webkit-backdrop-filter: var(--blur-md) saturate(180%); -webkit-backdrop-filter: var(--blur-md) saturate(180%);
z-index: calc(var(--z-nav) - 1); z-index: calc(var(--z-nav) - 1);
} }*/
} }