malpercio-dev · malpercio-dev · Jul 13, 2026 · Jul 13, 2026 · Jul 13, 2026
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/apps/admin-companion/src/app.html b/apps/admin-companion/src/app.html
@@ -2,7 +2,10 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, viewport-fit=cover"
+		/>
 		<title>Admin Companion</title>
 		%sveltekit.head%
 	</head>

diff --git a/apps/admin-companion/src/lib/components/ui/ScreenShell.svelte b/apps/admin-companion/src/lib/components/ui/ScreenShell.svelte
@@ -72,8 +72,14 @@
   .screen {
     display: flex;
     flex-direction: column;
+    /* 100vh first is the fallback for iOS < 16 (deployment floor is iOS 13), where
+       dvh is unsupported; dvh then wins where available and tracks the real height. */
+    min-height: 100vh;
     min-height: 100dvh;
-    padding: var(--space-xl) var(--space-lg) var(--space-lg);
+    /* Pad clear of the OS chrome (status bar / Dynamic Island / home indicator),
+       falling back to the base spacing off a notched device. */
+    padding: max(var(--space-xl), var(--safe-top)) max(var(--space-lg), var(--safe-right))
+      max(var(--space-lg), var(--safe-bottom)) max(var(--space-lg), var(--safe-left));
     gap: var(--space-lg);
   }
   .head {

diff --git a/apps/admin-companion/src/lib/styles/base.css b/apps/admin-companion/src/lib/styles/base.css
@@ -10,6 +10,16 @@
 
 :root {
   color-scheme: dark; /* the console is dark-first by design — cool slate under low light */
+
+  /* Safe-area insets (status bar / Dynamic Island / home indicator). These read
+     the real device insets only because app.html opts in with viewport-fit=cover;
+     off a notched device they fall back to 0px, so every `max(--space-*, --safe-*)`
+     collapses to the base spacing. ScreenShell pads by these so content never
+     renders under the OS chrome. */
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
 }
 
 html {
@@ -18,6 +28,9 @@ html {
 
 body {
   margin: 0;
+  /* No whole-page rubber-band past the content — the operator screens scroll the
+     document, and bouncing past it would only reveal blank slate ground. */
+  overscroll-behavior: none;
   background: var(--color-bg);
   color: var(--color-ink);
   font-family: var(--font-sans);

diff --git a/apps/identity-wallet/src/app.html b/apps/identity-wallet/src/app.html
@@ -2,7 +2,10 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, viewport-fit=cover"
+		/>
 		<script>
 			// Pre-paint appearance restore. The Keychain-backed preference is
 			// mirrored in localStorage (key + reconcile logic in $lib/appearance)

diff --git a/apps/identity-wallet/src/lib/components/ui/OnboardingShell.svelte b/apps/identity-wallet/src/lib/components/ui/OnboardingShell.svelte
@@ -42,6 +42,9 @@
     flex-direction: column;
     height: 100%;
     padding: var(--space-xl) var(--space-lg);
+    /* Scroll when the content is taller than the frame (small devices, long
+       error copy) instead of trapping it off-screen. */
+    overflow-y: auto;
   }
 
   .back {
@@ -65,7 +68,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    /* `safe` centering: centered when it fits, top-aligned when it overflows, so
+       the top of tall content is never pushed above the scroll origin (unreachable).
+       The plain `center` first is the fallback for any WebView that doesn't parse the
+       `safe` keyword — it keeps centering rather than reverting to top alignment. */
     justify-content: center;
+    justify-content: safe center;
     gap: var(--space-md);
     text-align: center;
     width: 100%;

diff --git a/apps/identity-wallet/src/lib/styles/base.css b/apps/identity-wallet/src/lib/styles/base.css
@@ -16,6 +16,16 @@
      appearance control overrides it via an inline style on <html>
      ($lib/appearance + the pre-paint script in app.html). */
   color-scheme: light dark;
+
+  /* Safe-area insets (status bar / Dynamic Island / home indicator). These read
+     the real device insets only because app.html opts in with viewport-fit=cover;
+     off a notched device (desktop, older iOS) they fall back to 0px, so every
+     `max(--space-*, --safe-*)` collapses to the base spacing. Screens pad by these
+     so content never renders under the OS chrome. */
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
 }
 
 html {
@@ -27,6 +37,9 @@ html {
 
 body {
   margin: 0;
+  /* No whole-page rubber-band: the app frame is a fixed viewport and each screen
+     scrolls internally, so bouncing the document would only reveal blank ground. */
+  overscroll-behavior: none;
   background: var(--color-bg);
   color: var(--color-ink);
   font-family: var(--font-sans);

diff --git a/apps/identity-wallet/src/routes/+page.svelte b/apps/identity-wallet/src/routes/+page.svelte
@@ -530,9 +530,20 @@
 
 <style>
   .app {
+    /* A fixed viewport frame padded clear of the OS chrome. dvh (not vh) tracks the
+       real visible height on iOS; overflow:hidden keeps the frame itself from
+       scrolling — each screen owns its own scroll within the safe area. The 100vh
+       declared first is the fallback for iOS < 16 (deployment floor is iOS 13),
+       where dvh is unsupported and would otherwise leave the frame with no height. */
     height: 100vh;
+    height: 100dvh;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    padding-top: var(--safe-top);
+    padding-right: var(--safe-right);
+    padding-bottom: var(--safe-bottom);
+    padding-left: var(--safe-left);
   }
 
   .code {