From 6034da715394db57df3c8ef74515f4a6f111e8d5 Mon Sep 17 00:00:00 2001 From: ordinarthur <@arthurbarre.js@gmail.com> Date: Mon, 20 Apr 2026 16:13:29 +0200 Subject: [PATCH] fix(web): responsive guards for iOS WKWebView The native shell exposed a few latent issues: - viewport lacked viewport-fit=cover + maximum-scale so content could zoom and leak under the notch, - body had no overflow-x guard, so any one-line string pushed the layout wider than the device, - #root had no env(safe-area-inset-*) padding, hiding content behind the status bar now that Capacitor's contentInset is off. Flipping contentInset from "always" to "never" lets the CSS env() values drive the inset (single source of truth, no double padding). Co-Authored-By: Claude Opus 4.7 --- web/capacitor.config.ts | 4 +++- web/index.html | 5 ++++- web/src/index.css | 11 +++++++++++ 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/web/capacitor.config.ts b/web/capacitor.config.ts index 2da6797..05390e6 100644 --- a/web/capacitor.config.ts +++ b/web/capacitor.config.ts @@ -13,7 +13,9 @@ const config: CapacitorConfig = { }, ios: { scheme: "AnyDrop", - contentInset: "always", + // We handle safe-areas in CSS via env(safe-area-inset-*). Letting the + // webview add its own inset on top would double-up the padding. + contentInset: "never", }, }; diff --git a/web/index.html b/web/index.html index 163d4b2..63fd761 100644 --- a/web/index.html +++ b/web/index.html @@ -2,7 +2,10 @@ - + + + + diff --git a/web/src/index.css b/web/src/index.css index fb4cff5..5b38cbd 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -17,6 +17,12 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; + overflow-x: hidden; + max-width: 100vw; + -webkit-text-size-adjust: 100%; + } + body { + overscroll-behavior-y: none; } /* Paper grain — fibrous noise, warm brown tint, multiply */ body::before { @@ -33,6 +39,11 @@ position: relative; z-index: 1; min-height: 100vh; + min-height: 100dvh; + padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); } h1, h2,