ios: fix safe area

shonsirsha · shonsirsha · commit c1aba6c68185 · 2025-04-28T10:53:32.000+02: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
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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>
+</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/dialog/dialog.module.css b/frontends/web/src/components/dialog/dialog.module.css
@@ -58,12 +58,12 @@
 }
 
 .header {
-    height: var(--item-height);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 0 var(--space-half);
+    padding: 13.5px var(--space-half);
+    padding-top: calc(13.5px + env(safe-area-inset-top, 0));
     border-bottom: solid 1px var(--background);
 }
 
@@ -212,6 +212,9 @@
         font-size: var(--header-default-font-size);
     }
 
+    .header {
+    }
+
     .modal {
         padding: 0;
     }
diff --git a/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css b/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css
@@ -49,8 +49,8 @@
     background-color: var(--background);
     cursor: default;
     display: flex;
-    height: var(--item-height);
-    padding: 0 var(--space-half);
+    padding: 13.5px var(--space-half);
+    padding-top: calc(13.5px + env(safe-area-inset-top, 0));
     position: relative;
 }
 
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 {

Original file line number	Diff line number	Diff line change
`@@ -58,12 +58,12 @@`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`.header {`
`61`		`- height: var(--item-height);`
`62`	`61`	`display: flex;`
`63`	`62`	`flex-direction: row;`
`64`	`63`	`justify-content: space-between;`
`65`	`64`	`align-items: center;`
`66`		`- padding: 0 var(--space-half);`
	`65`	`+ padding: 13.5px var(--space-half);`
	`66`	`+ padding-top: calc(13.5px + env(safe-area-inset-top, 0));`
`67`	`67`	`border-bottom: solid 1px var(--background);`
`68`	`68`	`}`
`69`	`69`
`@@ -212,6 +212,9 @@`
`212`	`212`	`font-size: var(--header-default-font-size);`
`213`	`213`	`}`
`214`	`214`
	`215`	`+ .header {`
	`216`	`+ }`
	`217`	`+`
`215`	`218`	`.modal {`
`216`	`219`	`padding: 0;`
`217`	`220`	`}`