ordinarthur/anydrop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): responsive guards for iOS WKWebView
All checks were successful
Build & Deploy / build-and-deploy (push) Successful in 40s
Details

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
ordinarthur 2026-04-20 16:13:29 +02:00
parent 9674b19590
commit 6034da7153
3 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/capacitor.config.ts
View File

@ -13,7 +13,9 @@ const config: CapacitorConfig = {
}, },
ios: { ios: {
scheme: "AnyDrop", 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",
}, },
}; };

5
web/index.html
View File

@ -2,7 +2,10 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="AnyDrop — Instant, peer-to-peer file and text transfer, universal across platforms." /> <meta name="description" content="AnyDrop — Instant, peer-to-peer file and text transfer, universal across platforms." />
<meta name="theme-color" content="#F5F0E6" /> <meta name="theme-color" content="#F5F0E6" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

11
web/src/index.css
View File

@ -17,6 +17,12 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; 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 */ /* Paper grain — fibrous noise, warm brown tint, multiply */
body::before { body::before {
@ -33,6 +39,11 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
min-height: 100vh; 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, h1,
h2, h2,