Merge pull request #20141 from mozilla/FXA-13203

fix(settings): Top content hidden on mobile

Author: vpomerleau

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">

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__

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 {