rework fullscreen on mobiles

ui/shared/layout/LayoutApp.tsx

-import { Global, css } from '@emotion/react';
 import React from 'react';
 
 import type { Props } from './types';
@@ -10,26 +9,12 @@ import * as Layout from './components';
 
 const LayoutDefault = ({ children }: Props) => {
   return (
-    <>
-      <Global
-        styles={ css`
-          html {
-            height: -webkit-fill-available;
-          }
-          body {
-            height: 100vh;
-            height: -webkit-fill-available;
-            display: flex;
-            flex-direction: column;
-          }
-          #__next {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-          }
-        ` }
-      />
-      <Layout.Container overflowY="hidden" flex={ 1 } display="flex" flexDir="column">
+    <Layout.Container
+      overflowY="hidden"
+      height={ [ '-webkit-fill-available', '100vh' ] }
+      display="flex"
+      flexDirection="column"
+    >
       <Layout.TopRow/>
       <HeaderMobile hideSearchBar/>
       <Layout.MainArea minH="auto" flex={ 1 }>
@@ -46,7 +31,6 @@ const LayoutDefault = ({ children }: Props) => {
         </Layout.MainColumn>
       </Layout.MainArea>
     </Layout.Container>
-    </>
   );
 };