fix: re-enable viewport-fit=cover and fix styles using env safe-area-…

…insert (#2697)

capacitor.config.ts

@@ -25,7 +25,6 @@ const config: CapacitorConfig = {
   ...serverConfig,
   ios: {
     backgroundColor: '000000',
-    contentInset: 'always',
   },
   plugins: {
     Keyboard: {

index.html

@@ -7,7 +7,7 @@
     -->
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=contain"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
     />
     <meta name="mobile-web-app-capable" content="yes" />
 

src/components/AppComponent.tsx

@@ -184,7 +184,12 @@ const AppComponent: FC = () => {
   const Modal = showModal ? modals[showModal] : null
 
   return (
-    <div>
+    <div
+      className={css({
+        /* safeAreaTop applies for rounded screens */
+        paddingTop: 'safeAreaTop',
+      })}
+    >
       <Alert />
       <Tips />
       <CommandPalette />

src/components/ErrorMessage.tsx

@@ -2,7 +2,6 @@ import { FC, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { TransitionGroup } from 'react-transition-group'
 import { css } from '../../styled-system/css'
-import { token } from '../../styled-system/tokens'
 import { errorActionCreator as error } from '../actions/error'
 import usePositionFixed from '../hooks/usePositionFixed'
 import CloseButton from './CloseButton'
@@ -33,7 +32,6 @@ const ErrorMessage: FC = () => {
             })}
             style={{
               ...positionFixedStyles,
-              top: `calc(${token('spacing.safeAreaTop')} + ${positionFixedStyles.top}px)`,
             }}
           >
             {value.toString()}

src/components/HamburgerMenu.tsx

@@ -88,7 +88,7 @@ const HamburgerMenu = () => {
           padding: `${paddingTop}px 15px 10px 15px`,
           // On macOS, if the user cancels a drag and then switches tabs, upon returning mouseup will fire at coordinates (0,0), triggering fastClick on any element located at (0,0).
           // Therefore, position the HamburgerMenu at top: 1px so that the sidebar is not accidentally opened on tab change.
-          top: positionFixedStyles.top + 1,
+          top: `calc(${positionFixedStyles.top} + 1px)`,
         }}
         {...fastClick(() => {
           // TODO: Why does the sidebar not open with fastClick or onTouchEnd without a setTimeout?

src/components/NavBar.tsx

@@ -63,8 +63,9 @@ const NavBar = ({ position }: { position: string }) => {
         ...(!isTouch || !editing
           ? {
               position: 'sticky',
-              // cannot use safe-area-inset because of mobile Safari z-index issues
-              bottom: 0,
+              /* spacing.safeAreaBottom applies for rounded screens */
+              bottom: 'calc(max(11px, token(spacing.safeAreaBottom)))',
+              marginBottom: '10px',
             }
           : undefined),
       })}
@@ -96,8 +97,6 @@ const NavBar = ({ position }: { position: string }) => {
                   width: '100%',
                   display: 'flex',
                   alignItems: 'flex-end',
-                  /* rounded screens */
-                  paddingBottom: 'calc(max(10px, {spacing.safeAreaBottom}))',
                 }),
               })}
             >

src/components/modals/ModalComponent.tsx

@@ -89,10 +89,11 @@ class ModalComponent extends React.Component<ModalProps> {
               padding: '10px 20px',
               margin: '-10px -20px',
               position: 'fixed',
-              top: 'calc(9px - 0.2em)',
               right: '11px',
               color: 'inherit',
               textDecoration: 'none',
+              /* spacing.safeAreaTop applies for rounded screens */
+              top: 'calc(token(spacing.safeAreaTop) + 9px - 0.2em)',
             })}
             {...fastClick(this.close)}
           >

src/hooks/usePositionFixed.ts

@@ -1,5 +1,6 @@
 /** Position fixed breaks in mobile Safari when the keyboard is up. This module provides functionality to emulate position:fixed by changing all top navigation to position:absolute and updating on scroll. */
 import { useEffect } from 'react'
+import { token } from '../../styled-system/tokens'
 import { isIOS, isSafari, isTouch } from '../browser'
 import * as selection from '../device/selection'
 import reactMinistore from '../stores/react-ministore'
@@ -27,7 +28,7 @@ const initEventHandler = once(() => {
 const usePositionFixed = (): {
   position: 'fixed' | 'absolute'
   overflowX?: 'hidden' | 'visible'
-  top: number
+  top: string
 } => {
   const position = positionFixedStore.useState()
   const scrollTop = useScrollTop({ disabled: position === 'fixed' })
@@ -37,7 +38,8 @@ const usePositionFixed = (): {
   return {
     position: position ?? 'fixed',
     overflowX: position === 'absolute' ? 'hidden' : 'visible',
-    top: position === 'absolute' ? scrollTop : 0,
+    /* spacing.safeAreaTop applies for rounded screens */
+    top: position === 'absolute' ? `${scrollTop}px` : token('spacing.safeAreaTop'),
   }
 }