public/styles.css

@@ -2,6 +2,26 @@
   overscroll-behavior: none;
 }
 
+/* Keep app chrome non-selectable so iOS long-press doesn't open the
+   edit menu (AutoFill/Copy/Siri). Inputs and opted-in regions stay
+   selectable. */
+body {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input,
+textarea,
+[contenteditable="true"],
+[contenteditable=""],
+[data-selectable],
+[data-selectable] * {
+  -webkit-touch-callout: default;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

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',