Fix notch layout issue

Author: Rokt33r

mobile.html

@@ -4,7 +4,8 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Boost Note</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />

src/mobile/components/layouts/AppLayout.tsx

@@ -81,23 +81,23 @@ export default AppLayout
 
 const Container = styled.div`
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: env(safe-area-inset-top);
+  left: env(safe-area-inset-left);
+  right: env(safe-area-inset-right);
+  bottom: env(safe-area-inset-bottom);
   width: 100%;
   height: 100%;
   overflow: hidden;
   .nav {
-    position: fixed;
+    position: absolute;
     left: -360px;
     width: 360px;
     bottom: 0;
     top: 0;
     transition: left 200ms ease-in-out;
   }
   .main {
-    position: fixed;
+    position: absolute;
     left: 0;
     height: 100%;
     width: 100%;

src/mobile/components/organisms/modals/atoms/ModalContainer.tsx

@@ -42,8 +42,10 @@ const zIndexModals = 8001
 
 const Container = styled.div`
   &.modal-container {
-    width: 100%;
-    height: 100%;
+    top: env(safe-area-inset-top);
+    left: env(safe-area-inset-left);
+    right: env(safe-area-inset-right);
+    bottom: env(safe-area-inset-bottom);
     position: fixed;
     z-index: ${zIndexModals};
   }

src/shared/components/organisms/Dialog/Dialog.tsx

@@ -70,9 +70,9 @@ const Container = styled.div`
     outline: none;
     display: flex;
     position: absolute;
-    right: 0;
-    left: 0;
-    top: ${({ theme }) => theme.sizes.spaces.sm}px;
+    top: env(safe-area-inset-top, 0px);
+    left: env(safe-area-inset-left, 0px);
+    right: env(safe-area-inset-right, 0px);
     z-index: ${dialogZIndex + 1};
     margin: auto;
   }