pwa fixes

src/features/core/components/back-button.tsx

@@ -14,7 +14,7 @@ const BackButton = ({ top=20, left=20 }: { top?: number, left?: number }) => {
       onClick={() => router.history.back()}
       pos='absolute'
       left={left}
-      top={top}
+      top={`calc(${top}px + env(safe-area-inset-top, 0px))`}
     >
       <ArrowLeftIcon weight='bold' size={20} />
     </UnstyledButton>

src/features/core/components/header.tsx

@@ -59,6 +59,7 @@ const Header = ({ collapsed, title, titleValues, withBackButton }: HeaderConfig)
       style={{
         alignItems: 'center',
         justifyContent: 'center',
+        paddingTop: 'env(safe-area-inset-top, 0px)',
       }}
     >
       { withBackButton && <BackButton /> }

src/features/core/components/layout.tsx

@@ -18,7 +18,12 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
     <AppShell
       id='app-shell'
       layout='alt'
-      header={{ height: 60, collapsed: header.collapsed }}
+      header={{
+        // Old installs froze black-translucent at add-to-home-screen time, so
+        // the webview can extend under the status bar; inset is 0 elsewhere.
+        height: 'calc(60px + env(safe-area-inset-top, 0px))',
+        collapsed: header.collapsed,
+      }}
       navbar={{
         width: { base: 0, sm: 100, md: 200, lg: 300 },
         breakpoint: 'sm',