fix(pwa): keep the top of the installed app clear of iOS 26's edge blur

[thierryvm]

Summary

@Thierry reported this on an iPhone 14 after #397. With the app installed on the home screen, the top bar slid into a blur under the clock: the menu, GitHub and login controls on both the landing nav and the app top bar.

Cause. Since iOS 26, installed web apps (black-translucent + viewport-fit=cover) get a Liquid Glass edge blur that iOS draws over the top of the page, about 40pt past the status bar. It is system chrome, so no CSS or meta tag turns it off. Our headers are only padded by env(safe-area-inset-top), which leaves them inside the blur band.

Fix. iOS skips that blur when a fixed box with a background covers the top edge, and shows the box's color instead. StatusBarBackdrop is that box. It is mounted once in App.tsx and has these properties:

• fixed and full width, in the app's background color;
• aria-hidden and pointer-events-none;
• z-[45]: above the sidebar, below the modals;
• height env(safe-area-inset-top), which is 0 in a Safari tab and on desktop, so nothing changes there.

Honest limit. The behaviour comes from other PWA projects' reports, not from Apple documentation, and Chrome emulation cannot reproduce it. It must be confirmed on the real iPhone. If the blur remains, the documented fallback is to push the header content down by env(safe-area-inset-top) + 2.5rem in display-mode: standalone.

References:

• Keep the iPhone home-screen app's header clear of iOS 26's edge blur devswha/herdr-web-ui#106
• News: keep the top of the installed app clear of iOS 26's edge blur tomallison24/tomallison24#62
• https://1ar.io/updates/safari-26-liquid-glass-web/

Test plan

• tsc, eslint, full vitest, vite build.
  • Two live-Supabase integration tests timed out under full-suite concurrency. This flakiness is known. They pass alone (28/28).
• New statusBarBackdrop.test.tsx
• CI, preview smoke test, merge
• @Thierry: installed app on the iPhone, top of the landing and of a lesson

🤖 Generated with Claude Code

Résumé par Sourcery

Gardez le haut de l’application iOS installée dégagé en ajoutant un arrière-plan opaque à la barre d’état, derrière l’interface de l’application.

Corrections de bugs :

• Empêcher le flou des bords des applications web installées sous iOS 26 d’obscurcir la navigation de la page d’accueil et la barre supérieure de l’application.

Améliorations :

• Ajouter un arrière-plan décoratif pour la barre d’état qui s’adapte à l’encart de la zone de sécurité, tout en restant inactif dans les onglets Safari et les navigateurs de bureau.

Tests :

• Ajouter une couverture de tests pour le positionnement, l’apparence, l’accessibilité et le comportement vis-à-vis du pointeur de l’arrière-plan de la barre d’état.

Original summary in English

Summary by Sourcery

Keep the top of the installed iOS app clear by adding an opaque status-bar backdrop behind the application chrome.

Bug Fixes:

• Prevent iOS 26's installed-web-app edge blur from obscuring the landing navigation and application top bar.

Enhancements:

• Add a decorative status-bar backdrop that adapts to the safe-area inset while remaining inactive in Safari tabs and desktop browsers.

Tests:

• Add coverage for the status-bar backdrop's positioning, appearance, accessibility, and pointer behavior.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
terminal-learning	Ready	Preview	Sep 29, 2026 4:35pm UTC

[sourcery-ai]

Sorry @thierryvm, you've used your own review budget of 250,000 diff characters for the last 7 days.

You can request another review in 6 hours and 53 minutes by commenting @sourcery-ai review. Upgrade to get a review now.

[sourcery-ai]

Guide du réviseur

La PR contourne le flou Liquid Glass d’iOS 26 dans les PWA autonomes en montant une bande fixe, colorée comme l’arrière-plan, au niveau de la zone sûre à la racine de l’application ; elle est volontairement inactive et absente des environnements dépourvus d’un encart supérieur de zone sûre. La couverture unitaire vérifie les classes clés et les attributs d’accessibilité de l’élément, tandis que des tests sur un véritable iPhone restent nécessaires, car ce comportement ne peut pas être reproduit dans l’émulation d’un navigateur.

Modifications au niveau des fichiers

Modification	Détails	Fichiers
Ajoute une bande opaque fixe pour couvrir le flou du bord supérieur des PWA installées sur iOS 26.	Introduit un arrière-plan réutilisable, dimensionné selon l’encart supérieur de la zone sûre et coloré comme l’arrière-plan de l’application. Rend la bande décorative et non interactive, avec un empilement inférieur aux modales et supérieur à la barre latérale. Monte l’arrière-plan une seule fois à la racine de l’application afin qu’il couvre la navigation de la page d’accueil et des leçons. Ajoute un test ciblé du composant pour le positionnement, l’arrière-plan, l’accessibilité, le comportement du pointeur et le dimensionnement selon la zone sûre.	src/app/components/StatusBarBackdrop.tsx src/app/App.tsx src/test/statusBarBackdrop.test.tsx
Documente la correction visible par l’utilisateur sur iPhone et la réserve concernant sa validation.	Ajoute une entrée en français au journal des modifications décrivant le flou de l’application installée et la solution de la bande supérieure opaque. Consigne le rapport issu d’un appareil réel et la nécessité d’une vérification sur iPhone dans l’historique du projet.	CHANGELOG.md STORY.md

---

Conseils et commandes

Interagir avec Sourcery

• Déclencher une nouvelle revue : commentez @sourcery-ai review sur la pull request.
• Poursuivre les discussions : répondez directement aux commentaires de revue de Sourcery.
• Générer une issue GitHub à partir d’un commentaire de revue : demandez à Sourcery de créer une issue à partir d’un commentaire de revue en y répondant. Vous pouvez également répondre à un commentaire de revue avec @sourcery-ai issue pour créer une issue à partir de celui-ci.
• Générer un titre de pull request : écrivez @sourcery-ai n’importe où dans le titre de la pull request pour générer un titre à tout moment. Vous pouvez également commenter @sourcery-ai title sur la pull request pour générer ou régénérer le titre à tout moment.
• Générer un résumé de pull request : écrivez @sourcery-ai summary n’importe où dans le corps de la pull request pour générer un résumé de PR à tout moment, exactement à l’endroit souhaité. Vous pouvez également commenter @sourcery-ai summary sur la pull request pour générer ou régénérer le résumé à tout moment.
• Générer le guide du réviseur : commentez @sourcery-ai guide sur la pull request pour générer ou régénérer le guide du réviseur à tout moment.
• Résoudre tous les commentaires de Sourcery : commentez @sourcery-ai resolve sur la pull request pour résoudre tous les commentaires de Sourcery. Utile si vous avez déjà traité tous les commentaires et ne souhaitez plus les voir.
• Rejeter toutes les revues de Sourcery : commentez @sourcery-ai dismiss sur la pull request pour rejeter toutes les revues de Sourcery existantes. Particulièrement utile si vous souhaitez repartir de zéro avec une nouvelle revue — n’oubliez pas de commenter @sourcery-ai review pour déclencher une nouvelle revue !

Personnaliser votre expérience

Accédez à votre tableau de bord pour :

• Activer ou désactiver les fonctionnalités de revue, comme le résumé de pull request généré par Sourcery, le guide du réviseur, et d’autres fonctionnalités.
• Modifier la langue de revue.
• Ajouter, supprimer ou modifier des instructions de revue personnalisées.
• Ajuster d’autres paramètres de revue.

Obtenir de l’aide

• Contactez notre équipe d’assistance pour toute question ou tout commentaire.
• Consultez notre documentation pour obtenir des guides et des informations détaillés.
• Restez en contact avec l’équipe Sourcery en nous suivant sur X/Twitter, LinkedIn ou GitHub.

Original review guide in English

Reviewer's Guide

The PR works around iOS 26 Liquid Glass blur in standalone PWAs by mounting a fixed, background-colored safe-area strip at the app root; it is intentionally inert and absent outside environments with a top safe-area inset. Unit coverage validates the element’s key classes and accessibility attributes, while real iPhone testing remains necessary because the behavior cannot be reproduced in browser emulation.

File-Level Changes

Change	Details	Files
Adds a fixed opaque strip to cover iOS 26’s installed-PWA top-edge blur.	Introduces a reusable backdrop sized to the top safe-area inset and colored with the app background. Makes the strip decorative and non-interactive, with stacking below modals and above the sidebar. Mounts the backdrop once at the application root so it covers both landing and lesson navigation. Adds a focused component test for positioning, background, accessibility, pointer behavior, and safe-area sizing.	src/app/components/StatusBarBackdrop.tsx src/app/App.tsx src/test/statusBarBackdrop.test.tsx
Documents the user-visible iPhone fix and its validation caveat.	Adds a French changelog entry describing the installed-app blur and opaque top strip workaround. Records the real-device report and the need for iPhone verification in the project story.	CHANGELOG.md STORY.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.