ios: fix safe area

shonsirsha · shonsirsha · commit db69ef7614a8 · 2025-03-12T07:21:39.000+01:00
diff --git a/frontends/ios/BitBoxApp/BitBoxApp/WebView.swift b/frontends/ios/BitBoxApp/BitBoxApp/WebView.swift
@@ -128,6 +128,10 @@ struct WebView: UIViewRepresentable {
         let webView = WKWebView(frame: .zero, configuration: config)
         webView.navigationDelegate = context.coordinator
         webView.uiDelegate = context.coordinator
+        
+        // Disables automatic content inset adjustment to prevent safe area issues
+        // https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior-swift.property
+        webView.scrollView.contentInsetAdjustmentBehavior = .never
 
         setHandlers.setMessageHandlers(handlers: MessageHandlers(webView: webView))
         let source = """
diff --git a/frontends/web/index.html b/frontends/web/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <title>BitBoxApp</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <meta name="theme-color" content="#000000" />
+  <title>BitBoxApp</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>
diff --git a/frontends/web/src/app.module.css b/frontends/web/src/app.module.css
@@ -6,6 +6,10 @@
     min-width: 0;
     /* mobile viewport bug fix */
     max-height: -webkit-fill-available;
+    /* iOS safe area handling */
+    padding-top: env(safe-area-inset-top, 0);
+    padding-left: env(safe-area-inset-left, 0);
+    padding-right: env(safe-area-inset-right, 0);
 }
 
 @media (max-width: 900px) {
diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
@@ -51,8 +51,8 @@
 .header {
     background-color: var(--color-blue);
     flex-shrink: 0;
-    height: var(--header-height);
-    padding: 0 var(--space-default);
+    padding: 23px var(--space-default);
+    padding-top: calc(23px + env(safe-area-inset-top, 0));
 }
 
 .header h2 {
@@ -71,6 +71,7 @@
     flex-direction: column;
     flex-grow: 1;
     padding: 0 var(--space-default);
+    padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
 .content h1 {
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
@@ -103,6 +103,8 @@
 
     /* guide */
     --guide-width: 350px;
+
+    /* iOS viewport height variable */
 }
 
 :root,

Original file line number	Diff line number	Diff line change
`@@ -103,6 +103,8 @@`
`103`	`103`
`104`	`104`	`/* guide */`
`105`	`105`	`--guide-width: 350px;`
	`106`	`+`
	`107`	`+ /* iOS viewport height variable */`
`106`	`108`	`}`
`107`	`109`
`108`	`110`	`:root,`