ios: fix safe area

shonsirsha · shonsirsha · commit 9ef2b2289074 · 2025-05-06T08:55:06.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/bottom-navigation/bottom-navigation.module.css b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
@@ -7,6 +7,7 @@
   position: fixed;
   width: 100%;
   height: var(--bottom-navigation-height);
+  padding-top: calc(var(--space-half) - env(safe-area-inset-bottom, 0));
   justify-content: space-between;
 }
 
diff --git a/frontends/web/src/components/dialog/dialog.module.css b/frontends/web/src/components/dialog/dialog.module.css
@@ -58,12 +58,11 @@
 }
 
 .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);
     border-bottom: solid 1px var(--background);
 }
 
@@ -217,7 +216,7 @@
     }
 
     .modal, .modal.small, .modal.medium, .modal.large { 
-        margin-top: var(--space-default);
+        margin-top: calc(var(--space-default) + var(--space-half) +  env(safe-area-inset-top, 0));
         max-width: 100vw;
         height: 100vh;
         /* mobile viewport bug fix */
@@ -236,4 +235,4 @@
     .contentContainer.padded {
         padding: var(--space-half);
     }
-}
+}
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 {
diff --git a/frontends/web/src/components/view/view.module.css b/frontends/web/src/components/view/view.module.css
@@ -10,6 +10,7 @@
     position: fixed;
     right: 0;
     top: 0;
+    padding-top: env(safe-area-inset-top, 0);
     /* z-index between sidebar (~4000) and wait-dialog (~10000) */
     z-index: 5100;
 }
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
@@ -105,7 +105,7 @@
     --guide-width: 350px;
 
     /* bottom navigation */
-    --bottom-navigation-height: 70px;
+    --bottom-navigation-height: calc(70px + env(safe-area-inset-bottom, 0));
 }
 
 :root,

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`position: fixed;`
`8`	`8`	`width: 100%;`
`9`	`9`	`height: var(--bottom-navigation-height);`
	`10`	`+ padding-top: calc(var(--space-half) - env(safe-area-inset-bottom, 0));`
`10`	`11`	`justify-content: space-between;`
`11`	`12`	`}`
`12`	`13`
Original file line number	Diff line number	Diff line change
`@@ -58,12 +58,11 @@`
`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);`
`67`	`66`	`border-bottom: solid 1px var(--background);`
`68`	`67`	`}`
`69`	`68`
`@@ -217,7 +216,7 @@`
`217`	`216`	`}`
`218`	`217`
`219`	`218`	`.modal, .modal.small, .modal.medium, .modal.large {`
`220`		`- margin-top: var(--space-default);`
	`219`	`+ margin-top: calc(var(--space-default) + var(--space-half) + env(safe-area-inset-top, 0));`
`221`	`220`	`max-width: 100vw;`
`222`	`221`	`height: 100vh;`
`223`	`222`	`/* mobile viewport bug fix */`
`@@ -236,4 +235,4 @@`
`236`	`235`	`.contentContainer.padded {`
`237`	`236`	`padding: var(--space-half);`
`238`	`237`	`}`
`239`		`-}`
	`238`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@`
`10`	`10`	`position: fixed;`
`11`	`11`	`right: 0;`
`12`	`12`	`top: 0;`
	`13`	`+ padding-top: env(safe-area-inset-top, 0);`
`13`	`14`	`/* z-index between sidebar (~4000) and wait-dialog (~10000) */`
`14`	`15`	`z-index: 5100;`
`15`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,7 @@`
`105`	`105`	`--guide-width: 350px;`
`106`	`106`
`107`	`107`	`/* bottom navigation */`
`108`		`- --bottom-navigation-height: 70px;`
	`108`	`+ --bottom-navigation-height: calc(70px + env(safe-area-inset-bottom, 0));`
`109`	`109`	`}`
`110`	`110`
`111`	`111`	`:root,`