From 06a07daf9086293809316587022e87aeccf07b05 Mon Sep 17 00:00:00 2001
From: Valerie Pomerleau <vpomerleau@mozilla.com>
Date: Wed, 4 Mar 2026 14:48:24 -0800
Subject: [PATCH] fix(settings): Top content hidden on mobile

Because:

- Without viewport-fit=cover, browsers do not expose env(safe-area-inset-*) values to the page, causing content to render under the status bar or notch in embedded webview contexts
- The sticky header would pin beneath the native chrome on scroll without a matching safe area offset

This commit:

- Adds viewport-fit=cover to the viewport meta tag to unlock safe area inset values on iOS and Android
- Adds padding-top: env(safe-area-inset-top) to body to keep content below the status bar on page load
- Updates the sticky header's top offset to env(safe-area-inset-top) so it remains visible below the notch when scrolling

Closes #FXA-13203
---
 packages/fxa-react/components/Header/index.tsx | 6 +++++-
 packages/fxa-settings/public/index.html        | 3 ++-
 packages/fxa-settings/src/styles/tailwind.css  | 2 ++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/fxa-react/components/Header/index.tsx b/packages/fxa-react/components/Header/index.tsx
index 4bad913102a..3853124b9af 100644
--- a/packages/fxa-react/components/Header/index.tsx
+++ b/packages/fxa-react/components/Header/index.tsx
@@ -16,7 +16,11 @@ export const Header = (props: HeaderProps) => {
     <header
       data-testid="header"
       role="banner"
-      className={props.className || 'sticky top-0 bg-grey-10 z-10'}
+      // top-[env(safe-area-inset-top)] keeps the sticky header below the notch/status bar on scroll
+      className={
+        props.className ||
+        'sticky top-[env(safe-area-inset-top)] bg-grey-10 z-10'
+      }
       style={props.styles}
     >
       <div className="px-6 tablet:px-8 py-4 flex justify-between">
diff --git a/packages/fxa-settings/public/index.html b/packages/fxa-settings/public/index.html
index 7aadb77e4e3..eaa890984f9 100644
--- a/packages/fxa-settings/public/index.html
+++ b/packages/fxa-settings/public/index.html
@@ -8,8 +8,9 @@
   <meta name="description" content="" />
   <meta name="referrer" content="origin" />
   <meta name="robots" content="noindex,nofollow" />
+  <!-- viewport-fit=cover exposes env(safe-area-inset-*) values for notch/status bar support on iOS and Android -->
   <meta name="viewport"
-    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes" />
+    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes,viewport-fit=cover" />
   <meta name="fxa-config" content="__SERVER_CONFIG__" />
 
   __AUTH_URL_PRECONNECT__
diff --git a/packages/fxa-settings/src/styles/tailwind.css b/packages/fxa-settings/src/styles/tailwind.css
index 1ed30e3cd3d..84712cd0a2c 100644
--- a/packages/fxa-settings/src/styles/tailwind.css
+++ b/packages/fxa-settings/src/styles/tailwind.css
@@ -16,6 +16,8 @@
 
 body {
   @apply text-base font-body bg-grey-10 text-grey-900;
+  /* Prevent content from rendering under the status bar/notch on devices with display cutouts */
+  padding-top: env(safe-area-inset-top);
 }
 
 .nav-anchor {