From eb233b9f8ced80b097f9c9902abab59c59cadd30 Mon Sep 17 00:00:00 2001
From: "Thierry V." <46031203+thierryvm@users.noreply.github.com>
Date: Thu, 1 Oct 2026 19:15:14 +0200
Subject: [PATCH] fix(pwa): keep the installed app's content below iOS 26's
 edge blur

The opaque strip of #398, as tall as the status bar, did not stop the
Liquid Glass edge blur on the reporter's iPhone 14 (retested 1 October
2026). The fix confirmed on devices elsewhere keeps content out of the
blur: --inset-top (theme.css) is the safe-area inset, plus 2.5rem in the
installed app on iOS in portrait, and every top edge uses it (app layout,
sidebar, landing, privacy/changelog/story navs, login, PWA install and
support modals, AI tutor drawer). The strip fills that band at z-25, under
the sidebar overlay. Modal overlays scroll and center their card with
my-auto, so a card taller than the screen is never cut at the top.
Nothing changes in a browser tab or on desktop.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                                  | 10 ++++++
 STORY.md                                      | 10 ++++++
 src/app/components/Landing.tsx                | 11 ++++---
 src/app/components/Layout.tsx                 |  8 +++--
 src/app/components/MarkdownPage.tsx           |  2 +-
 src/app/components/PWAInstallModal.tsx        |  8 ++---
 src/app/components/PrivacyPolicy.tsx          |  2 +-
 src/app/components/Sidebar.tsx                |  5 +--
 src/app/components/StatusBarBackdrop.tsx      | 18 +++++++----
 src/app/components/ai/AiTutorPanel.tsx        |  2 +-
 src/app/components/auth/LoginModal.tsx        |  6 ++--
 .../components/support/SupportTicketModal.tsx |  4 +--
 src/styles/theme.css                          | 24 ++++++++++++++
 src/test/statusBarBackdrop.test.tsx           | 32 ++++++++++++++++---
 14 files changed, 111 insertions(+), 31 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb62341f..897888ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,16 @@
 
 ---
 
+## 📱 1er octobre 2026 — Le haut de l'app installée sur iPhone, deuxième essai
+
+*App installée sur l'écran d'accueil · iOS 26 · retour sur un iPhone 14*
+
+- Le correctif du 29 septembre (une bande opaque derrière la barre d'état) n'a pas suffi : retesté sur l'iPhone, le flou d'iOS 26 recouvrait toujours le haut de l'app.
+- Ce flou est dessiné par iOS lui-même, au-dessus de la page, et aucun réglage ne l'enlève. Dans l'app installée sur iPhone, le contenu du haut (barre de navigation, menu, fenêtre de connexion, tuteur IA) démarre maintenant 2,5rem plus bas, sous la zone floue, et la bande opaque couvre ce même espace.
+- Rien ne change dans Safari ni sur ordinateur. L'app installée tenue à l'horizontale garde l'ancien espacement.
+
+---
+
 ## 🤝 1er octobre 2026 — Le module GitHub devient une suite de gestes
 
 *6 leçons · exercices en étapes · sorties vérifiées sur Git 2.56 et PowerShell 7*
diff --git a/STORY.md b/STORY.md
index c64b1db5..d29dcbea 100644
--- a/STORY.md
+++ b/STORY.md
@@ -1245,6 +1245,16 @@ Six validateurs de plus ont disparu. Les écarts entre la théorie et le termina
 
 ---
 
+### Le flou qu'aucun test ne voit (1er octobre 2026)
+
+Le 29 septembre, j'avais corrigé le flou en haut de l'app installée sur iPhone avec une bande opaque derrière la barre d'état. Plusieurs projets décrivaient cette astuce, les tests passaient, la page s'affichait bien dans tous mes navigateurs. Thierry a rouvert l'app sur son iPhone : le flou était toujours là.
+
+Ce défaut n'existe que dans une app installée, sur un vrai iPhone. Aucun navigateur de test ne le reproduit, donc aucun test automatique ne pouvait me prévenir. En relisant les correctifs des autres projets, j'ai vu ce qui m'avait échappé : la plupart précisaient eux-mêmes qu'ils n'avaient pas été vérifiés sur un appareil. Un seul l'avait été, et il ne combat pas le flou : il en éloigne le contenu.
+
+C'est la version appliquée. Dans l'app installée sur iPhone, le haut de l'app descend de 2,5rem, et le flou ne recouvre plus qu'une bande de couleur unie. Le verdict reste celui de l'iPhone de Thierry, pas celui des tests.
+
+---
+
 ## Épilogue ouvert
 
 Il y a des questions auxquelles on n'a pas encore de réponse.
diff --git a/src/app/components/Landing.tsx b/src/app/components/Landing.tsx
index 4ac203f0..cc87d5e2 100644
--- a/src/app/components/Landing.tsx
+++ b/src/app/components/Landing.tsx
@@ -111,16 +111,17 @@ export function Landing() {
       )}
 
       {/* ── NAV ─────────────────────────────────────────────────── */}
-      {/* THI-152 brick 7bis: pt-[max(1rem,env(safe-area-inset-top))]
+      {/* THI-152 brick 7bis: pt-[max(1rem,var(--inset-top))]
           shifts the nav (Terminal logo + GitHub + Login + "Commencer →")
-          below the iOS status bar in PWA standalone mode (Add to Home
-          Screen). On Safari classic mobile and on desktop, env() resolves
-          to 0 → max(1rem, 0) = 1rem (= py-4 baseline, no regression).
+          below the iOS status bar and its edge blur in PWA standalone mode
+          (Add to Home Screen; --inset-top in theme.css). On Safari classic
+          mobile and on desktop, it resolves to 0 → max(1rem, 0) = 1rem
+          (= py-4 baseline, no regression).
           Pattern matches the footer (line 593) `pb-[max(2rem,env(...))]`.
           Layout.tsx already handles its own mobile top bar via the flex-1
           wrapper safe-area paddings (mini-PR 7/9), but Landing does NOT
           use Layout — it has its own nav, hence this dedicated fix. */}
-      <nav className="border-b border-[var(--github-border-primary)]/50 px-4 sm:px-6 pb-4 pt-[max(1rem,env(safe-area-inset-top))] flex items-center justify-between max-w-6xl mx-auto">
+      <nav className="border-b border-[var(--github-border-primary)]/50 px-4 sm:px-6 pb-4 pt-[max(1rem,var(--inset-top))] flex items-center justify-between max-w-6xl mx-auto">
         <div className="flex items-center gap-2 shrink-0">
           <div className="p-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
             <Terminal size={18} className="text-emerald-400" aria-hidden="true" />
diff --git a/src/app/components/Layout.tsx b/src/app/components/Layout.tsx
index f421a84c..876ef04f 100644
--- a/src/app/components/Layout.tsx
+++ b/src/app/components/Layout.tsx
@@ -9,15 +9,17 @@ export function Layout() {
     <div className="h-dvh flex overflow-hidden bg-[var(--github-bg)]" style={{ fontFamily: 'Inter, sans-serif' }}>
       <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
-      {/* THI-152 brick 7/9: pt/pl/pr env(safe-area-inset-*) on the flex-1
-          wrapper shifts both the mobile top bar AND the main area below
+      {/* THI-152 brick 7/9: the top padding (--inset-top, theme.css: the
+          safe-area inset, plus a clearance below iOS 26's edge blur in the
+          installed app) and pl/pr env(safe-area-inset-*) on the flex-1
+          wrapper shift both the mobile top bar AND the main area below
           the iOS status bar in PWA standalone mode (Add-to-Home-Screen).
           Without this, `apple-mobile-web-app-status-bar-style:
           black-translucent` (set in index.html) lets wifi/battery/signal
           icons overlay the top-bar content. On non-standalone Safari and
           on desktop, env(safe-area-inset-*) resolves to 0 → no shift.
           Landscape iPhone: pl/pr handle the notch on the rotated side. */}
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden pt-[env(safe-area-inset-top)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden pt-[var(--inset-top)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
         {/* Mobile top bar */}
         <div className="lg:hidden shrink-0 h-14 border-b border-[var(--github-border-primary)] bg-[var(--github-border-secondary)] flex items-center gap-3 px-3">
           <MenuButton onClick={() => setSidebarOpen(true)} />
diff --git a/src/app/components/MarkdownPage.tsx b/src/app/components/MarkdownPage.tsx
index 7d2025b7..d9e915ca 100644
--- a/src/app/components/MarkdownPage.tsx
+++ b/src/app/components/MarkdownPage.tsx
@@ -200,7 +200,7 @@ export function MarkdownPage({ content, title, subtitle, seo }: MarkdownPageProp
         <meta name="twitter:creator" content="@thierryvm" />
       </Helmet>
       {/* Nav */}
-      <nav className="border-b border-[var(--github-border-primary)]/50 px-6 py-4 flex items-center justify-between max-w-4xl mx-auto">
+      <nav className="border-b border-[var(--github-border-primary)]/50 px-6 pb-4 pt-[max(1rem,var(--inset-top))] flex items-center justify-between max-w-4xl mx-auto">
         <div className="flex items-center gap-2.5">
           <Terminal size={18} className="text-emerald-400" />
           <span className="font-mono text-sm text-[var(--github-text-primary)]">Terminal Learning</span>
diff --git a/src/app/components/PWAInstallModal.tsx b/src/app/components/PWAInstallModal.tsx
index 7b4ad821..5841a853 100644
--- a/src/app/components/PWAInstallModal.tsx
+++ b/src/app/components/PWAInstallModal.tsx
@@ -49,9 +49,9 @@ export function PWAInstallModal({ onClose }: PWAInstallModalProps) {
 
   if (isInstalled) {
     return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" onClick={onClose}>
+      <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 pt-[max(1rem,var(--inset-top))] bg-black/60 backdrop-blur-sm" onClick={onClose}>
         <div
-          className="bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl p-8 max-w-sm w-full text-center shadow-2xl"
+          className="bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl p-8 max-w-sm w-full my-auto text-center shadow-2xl"
           onClick={(e) => e.stopPropagation()}
         >
           <CheckCircle2 size={48} className="text-emerald-400 mx-auto mb-4" />
@@ -70,9 +70,9 @@ export function PWAInstallModal({ onClose }: PWAInstallModalProps) {
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" onClick={onClose}>
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 pt-[max(1rem,var(--inset-top))] bg-black/60 backdrop-blur-sm" onClick={onClose}>
       <div
-        className="bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl w-full max-w-md shadow-2xl"
+        className="bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl w-full max-w-md my-auto shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
diff --git a/src/app/components/PrivacyPolicy.tsx b/src/app/components/PrivacyPolicy.tsx
index d5a9c424..4dc02494 100644
--- a/src/app/components/PrivacyPolicy.tsx
+++ b/src/app/components/PrivacyPolicy.tsx
@@ -22,7 +22,7 @@ export function PrivacyPolicy() {
   return (
     <div className="min-h-dvh bg-[var(--github-bg)] text-[var(--github-text-primary)]" style={{ fontFamily: 'Inter, sans-serif' }}>
       {/* Nav */}
-      <nav className="border-b border-[var(--github-border-primary)]/50 px-6 py-4 flex items-center justify-between max-w-4xl mx-auto">
+      <nav className="border-b border-[var(--github-border-primary)]/50 px-6 pb-4 pt-[max(1rem,var(--inset-top))] flex items-center justify-between max-w-4xl mx-auto">
         <div className="flex items-center gap-2.5">
           <Terminal size={18} className="text-emerald-400" />
           <span className="font-mono text-sm text-[var(--github-text-primary)]">Terminal Learning</span>
diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
index e3f12dbb..c3371ec3 100644
--- a/src/app/components/Sidebar.tsx
+++ b/src/app/components/Sidebar.tsx
@@ -155,8 +155,9 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
         // iPhone with the notch on the rotated side, the inset is ~44 px
         // and the sidebar content shifts inward so it does not get
         // clipped by the notch. Pattern matches the brick 7bis Landing
-        // nav `max(...,env())` baseline-preservation idiom.
-        className={`fixed lg:static inset-y-0 left-0 z-40 w-72 bg-[var(--github-bg)] border-r border-[var(--github-border-primary)] flex flex-col transition-transform duration-300 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[max(0px,env(safe-area-inset-left))] focus:outline-none ${
+        // nav `max(...,env())` baseline-preservation idiom. The top
+        // padding is --inset-top (theme.css), below iOS 26's edge blur.
+        className={`fixed lg:static inset-y-0 left-0 z-40 w-72 bg-[var(--github-bg)] border-r border-[var(--github-border-primary)] flex flex-col transition-transform duration-300 pt-[var(--inset-top)] pb-[env(safe-area-inset-bottom)] pl-[max(0px,env(safe-area-inset-left))] focus:outline-none ${
           isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
         }`}
       >
diff --git a/src/app/components/StatusBarBackdrop.tsx b/src/app/components/StatusBarBackdrop.tsx
index 5a996b04..5aac7c57 100644
--- a/src/app/components/StatusBarBackdrop.tsx
+++ b/src/app/components/StatusBarBackdrop.tsx
@@ -5,19 +5,25 @@
  * iOS 26 lays its Liquid Glass edge blur over the top of the app, about 40pt
  * past the status bar: the top bar and the landing nav (GitHub, login) sat
  * inside that blur and looked like they slid under the clock (reported by
- * @thierry on an iPhone 14, 29 September 2026). iOS leaves the edge alone
- * when a fixed box with a background covers the top edge, and shows that
- * box's color instead. This strip is that box, in the app's background color.
+ * @thierry on an iPhone 14, 29 September 2026). Several apps report that iOS
+ * leaves the edge alone under a fixed box with a background; on that iPhone it
+ * did not. So the content starts below the blur (--inset-top), and this strip,
+ * in the app's background color, fills the band above it.
  *
- * Its height is env(safe-area-inset-top): 0 in a Safari tab and on desktop,
- * so it only exists where the status bar overlaps the page.
+ * Its height is --inset-top (theme.css): 0 in a Safari tab and on desktop, so
+ * it only exists where the status bar overlaps the page. In the installed app
+ * on iOS it also covers the 2.5rem clearance kept below the status bar, since
+ * the strip alone, as tall as the status bar, did not stop the blur on the
+ * device (retested 1 October 2026): what scrolls up under the blur is then
+ * this plain color, never text. z-[25]: above the page, under the dimmed
+ * overlay (z-30) and the drawer (z-40) of the mobile sidebar.
  */
 export function StatusBarBackdrop() {
   return (
     <div
       aria-hidden="true"
       data-testid="status-bar-backdrop"
-      className="pointer-events-none fixed inset-x-0 top-0 z-[45] h-[env(safe-area-inset-top)] bg-[var(--github-bg)]"
+      className="pointer-events-none fixed inset-x-0 top-0 z-[25] h-[var(--inset-top)] bg-[var(--github-bg)]"
     />
   );
 }
diff --git a/src/app/components/ai/AiTutorPanel.tsx b/src/app/components/ai/AiTutorPanel.tsx
index 795282af..711f471e 100644
--- a/src/app/components/ai/AiTutorPanel.tsx
+++ b/src/app/components/ai/AiTutorPanel.tsx
@@ -290,7 +290,7 @@ export function AiTutorPanel({ lang = 'fr', lessonContext, role, liftAboveMobile
             // Mobile: full-screen drawer with safe-area padding (iOS notch + home bar).
             // Desktop (md+): floating bottom-right card.
             style={{
-              paddingTop: 'env(safe-area-inset-top, 0px)',
+              paddingTop: 'var(--inset-top)',
               paddingBottom: 'env(safe-area-inset-bottom, 0px)',
             }}
             // THI-152 brick 6/9: `overflow-x-hidden max-w-full` is a
diff --git a/src/app/components/auth/LoginModal.tsx b/src/app/components/auth/LoginModal.tsx
index f60f953b..4075bcac 100644
--- a/src/app/components/auth/LoginModal.tsx
+++ b/src/app/components/auth/LoginModal.tsx
@@ -189,7 +189,9 @@ export function LoginModal({ open, onClose }: LoginModalProps) {
       // backdrop ensures the centered modal does not get clipped by iOS
       // status bar / home indicator / notch in PWA standalone mode. The
       // flex centering remains, but happens inside the safe-area inset.
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]"
+      // The card centers with my-auto, so a card taller than the screen
+      // (keyboard open, age gate) scrolls from its top instead of being cut.
+      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/60 backdrop-blur-sm pt-[var(--inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]"
       onClick={(e) => { if (e.target === e.currentTarget) handleClose(); }}
     >
       <div
@@ -197,7 +199,7 @@ export function LoginModal({ open, onClose }: LoginModalProps) {
         role="dialog"
         aria-modal="true"
         aria-labelledby="login-modal-title"
-        className="bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl p-6 w-full max-w-sm mx-4 shadow-2xl"
+        className="bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl p-6 w-full max-w-sm mx-4 my-auto shadow-2xl"
       >
         <div className="flex justify-between items-center mb-6">
           <h2 id="login-modal-title" className="text-lg font-semibold text-[var(--github-text-primary)] font-mono">
diff --git a/src/app/components/support/SupportTicketModal.tsx b/src/app/components/support/SupportTicketModal.tsx
index 109b8f9f..5afe6008 100644
--- a/src/app/components/support/SupportTicketModal.tsx
+++ b/src/app/components/support/SupportTicketModal.tsx
@@ -125,7 +125,7 @@ export function SupportTicketModal({ userId, onClose }: SupportTicketModalProps)
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 pt-[max(1rem,var(--inset-top))] bg-black/60 backdrop-blur-sm"
       onClick={handleBackdrop}
     >
       <div
@@ -134,7 +134,7 @@ export function SupportTicketModal({ userId, onClose }: SupportTicketModalProps)
         role="dialog"
         aria-modal="true"
         aria-labelledby={titleId}
-        className="bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl w-full max-w-md shadow-2xl focus:outline-none"
+        className="bg-[var(--github-border-secondary)] border border-[var(--github-border-primary)] rounded-xl w-full max-w-md my-auto shadow-2xl focus:outline-none"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
diff --git a/src/styles/theme.css b/src/styles/theme.css
index c907d9e1..85afbede 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -1,5 +1,29 @@
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * How far the app's top content starts from the top of the screen.
+ *
+ * Installed on an iPhone home screen (black-translucent + viewport-fit=cover),
+ * iOS 26 draws its Liquid Glass edge blur as system chrome over the top of the
+ * app, about 40pt past the status bar; no CSS or meta tag turns it off. An
+ * opaque strip as tall as the status bar alone did not stop it on @thierry's
+ * iPhone 14 (#398, retested 1 October 2026). The fix confirmed on devices by
+ * other apps is to keep content below the blur: 2.5rem of clearance, only in
+ * the installed app on iOS (-webkit-touch-callout exists only in WebKit on
+ * iOS), and none on a landscape phone, where the status bar is hidden.
+ * Everywhere else it is the plain safe-area inset (0 in a browser tab).
+ */
+:root {
+  --inset-top: env(safe-area-inset-top, 0px);
+}
+@supports (-webkit-touch-callout: none) {
+  @media (display-mode: standalone) and (orientation: portrait) {
+    :root {
+      --inset-top: calc(env(safe-area-inset-top, 0px) + 2.5rem);
+    }
+  }
+}
+
 :root {
   --font-size: 16px;
   --background: #ffffff;
diff --git a/src/test/statusBarBackdrop.test.tsx b/src/test/statusBarBackdrop.test.tsx
index 8758ee5b..f72d9772 100644
--- a/src/test/statusBarBackdrop.test.tsx
+++ b/src/test/statusBarBackdrop.test.tsx
@@ -1,15 +1,39 @@
 import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { StatusBarBackdrop } from '../app/components/StatusBarBackdrop';
+import { readFileSync } from 'node:fs';
+
+const theme = readFileSync('src/styles/theme.css', 'utf8');
+
+const components = import.meta.glob('../app/**/*.tsx', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
 
 describe('StatusBarBackdrop (iOS 26 edge blur)', () => {
-  it('is a fixed, opaque, decorative strip as tall as the status bar', () => {
+  it('is a fixed, opaque, decorative strip as tall as the top inset', () => {
     render(<StatusBarBackdrop />);
     const strip = screen.getByTestId('status-bar-backdrop');
     expect(strip).toHaveAttribute('aria-hidden', 'true');
-    // iOS keeps its blur off the top edge only under a fixed box with a background.
+    // A fixed box in the page color: what scrolls up under the blur is a plain band.
     expect(strip).toHaveClass('fixed', 'top-0', 'inset-x-0', 'bg-[var(--github-bg)]');
-    // No height outside an installed app: env() is 0 in a Safari tab and on desktop.
-    expect(strip).toHaveClass('h-[env(safe-area-inset-top)]', 'pointer-events-none');
+    // No height outside an installed app: --inset-top is 0 in a Safari tab and on desktop.
+    expect(strip).toHaveClass('h-[var(--inset-top)]', 'pointer-events-none');
+  });
+});
+
+describe('--inset-top: content kept below the iOS edge blur', () => {
+  it('is the safe-area inset, plus 2.5rem in the app installed on iOS, in portrait', () => {
+    expect(theme).toMatch(/:root \{\s*--inset-top: env\(safe-area-inset-top, 0px\);\s*\}/);
+    expect(theme).toMatch(
+      /@supports \(-webkit-touch-callout: none\) \{\s*@media \(display-mode: standalone\) and \(orientation: portrait\) \{\s*:root \{\s*--inset-top: calc\(env\(safe-area-inset-top, 0px\) \+ 2\.5rem\);/,
+    );
+  });
+
+  it('is what every component uses for the top edge (a bare safe-area inset would sit inside the blur)', () => {
+    const bare = Object.entries(components).filter(([, src]) => src.includes('safe-area-inset-top')).map(([path]) => path);
+    expect(bare).toEqual([]);
+    const users = Object.entries(components).filter(([, src]) => src.includes('var(--inset-top)')).map(([path]) => path.split('/').pop());
+    expect(users.sort()).toEqual([
+      'AiTutorPanel.tsx', 'Landing.tsx', 'Layout.tsx', 'LoginModal.tsx', 'MarkdownPage.tsx', 'PWAInstallModal.tsx',
+      'PrivacyPolicy.tsx', 'Sidebar.tsx', 'StatusBarBackdrop.tsx', 'SupportTicketModal.tsx',
+    ]);
   });
 });