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

fix(pwa): fix UI overlap, scroll bleed and wrong nav height on iOS

Browse Source 
Three root causes fixed:

1. Double safe-area padding: pwa.css set padding-top/bottom on body
   globally, but page containers already account for safe-area-inset
   in their height calculations. Removed body vertical padding (kept
   only in standalone media query for padding-top).

2. Wrong nav token: all page containers used --nav-height-mobile (56px)
   instead of --nav-bottom-height (68px = 56px scroll + 12px dots),
   causing 12px of content to render behind the bottom nav.

3. Scroll bleed: fixed-height page containers lacked overflow:hidden,
   allowing scroll events to propagate to the body. Added
   overscroll-behavior-y:contain on app-content globally.

Fixes #16
This commit is contained in:
Ulas
2026-04-04 22:02:19 +02:00
parent 7eb06ed905
commit 2508473265
13 changed files with 40 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/layout.css
+3 -2
View File
@@ -97,6 +97,7 @@
flex: 1;
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior-y: contain;
}
/* Sidebar auf Mobile verstecken */
@@ -217,7 +218,7 @@
* -------------------------------------------------------- */
.page-fab {
position: fixed;
bottom: calc(var(--nav-height-mobile) + 24px + var(--safe-area-inset-bottom));
bottom: calc(var(--nav-bottom-height) + 24px + var(--safe-area-inset-bottom));
right: var(--space-4);
width: 52px;
height: 52px;
@@ -865,7 +866,7 @@
/* FAB (Floating Action Button) */
.fab {
position: fixed;
bottom: calc(var(--nav-height-mobile) + var(--safe-area-inset-bottom) + var(--space-4));
bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom) + var(--space-4));
right: var(--space-4);
width: 52px;
height: 52px;