diff --git a/frontends/ios/BitBoxApp/BitBoxApp/WebView.swift b/frontends/ios/BitBoxApp/BitBoxApp/WebView.swift index 60cf049da1..70886b5e5d 100644 --- 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 index 015204460f..57aa44e5cf 100644 --- a/frontends/web/index.html +++ b/frontends/web/index.html @@ -2,7 +2,7 @@ - + BitBoxApp @@ -10,4 +10,4 @@
- + \ No newline at end of file diff --git a/frontends/web/src/app.module.css b/frontends/web/src/app.module.css index 3701cc9ba5..e174e7f768 100644 --- 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 index ac8713a949..8be6fcfc45 100644 --- 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 index 24152ab1a8..16ac95bbd8 100644 --- 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); } -} +} \ No newline at end of file diff --git a/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css b/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css index 72aaeca490..9fcd01eaef 100644 --- 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 index e4c5cae159..5010aa97b1 100644 --- 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 index d883d3cdfa..15b0570ce9 100644 --- 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 index c43d20ea48..a2fc6305c4 100644 --- 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,