fix app layout for mobiles

ui/shared/layout/LayoutApp.tsx

+import { Global, css } from '@emotion/react';
 import React from 'react';
 
 import type { Props } from './types';
@@ -9,24 +10,43 @@ import * as Layout from './components';
 
 const LayoutDefault = ({ children }: Props) => {
   return (
-    <Layout.Container overflowY="hidden" height="100vh">
-      <Layout.TopRow/>
-      <HeaderMobile/>
-      <Layout.MainArea>
-        <Layout.MainColumn
-          paddingTop={{ base: 16, lg: 0 }}
-          paddingBottom={ 0 }
-          paddingX={{ base: 4, lg: 6 }}
-          height={{ base: 'calc(100vh - 92px)', sm: 'auto' }} // 92px = Layout.TopRow + HeaderMobile
-        >
-          <AppErrorBoundary>
-            <Layout.Content pt={{ base: 0, lg: 2 }} flexGrow={ 1 }>
-              { children }
-            </Layout.Content>
-          </AppErrorBoundary>
-        </Layout.MainColumn>
-      </Layout.MainArea>
-    </Layout.Container>
+    <>
+      <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.TopRow/>
+        <HeaderMobile hideSearchBar/>
+        <Layout.MainArea minH="auto" flex={ 1 }>
+          <Layout.MainColumn
+            paddingTop={{ base: 0, lg: 0 }}
+            paddingBottom={ 0 }
+            paddingX={{ base: 4, lg: 6 }}
+          >
+            <AppErrorBoundary>
+              <Layout.Content pt={{ base: 0, lg: 2 }} flexGrow={ 1 }>
+                { children }
+              </Layout.Content>
+            </AppErrorBoundary>
+          </Layout.MainColumn>
+        </Layout.MainArea>
+      </Layout.Container>
+    </>
   );
 };
 

ui/shared/layout/LayoutHome.tsx

@@ -12,7 +12,7 @@ const LayoutHome = ({ children }: Props) => {
   return (
     <Layout.Container>
       <Layout.TopRow/>
-      <HeaderMobile isHomePage/>
+      <HeaderMobile hideSearchBar/>
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn

ui/shared/layout/components/MainArea.tsx

-import { Flex } from '@chakra-ui/react';
+import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
-const MainArea = ({ children }: Props) => {
+const MainArea = ({ children, className }: Props) => {
   return (
-    <Flex w="100%" minH="calc(100vh - 36px)" alignItems="stretch">
+    <Flex className={ className } w="100%" minH="calc(100vh - 36px)" alignItems="stretch">
       { children }
     </Flex>
   );
 };
 
-export default React.memo(MainArea);
+export default React.memo(chakra(MainArea));

ui/snippets/header/HeaderMobile.tsx

@@ -16,11 +16,11 @@ const LOGO_IMAGE_PROPS = {
 };
 
 type Props = {
-  isHomePage?: boolean;
+  hideSearchBar?: boolean;
   renderSearchBar?: () => React.ReactNode;
 }
 
-const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
+const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
   const bgColor = useColorModeValue('white', 'black');
   const scrollDirection = useScrollDirection();
   const { ref, inView } = useInView({ threshold: 1 });
@@ -57,7 +57,7 @@ const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
           { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
         </Flex>
       </Flex>
-      { !isHomePage && searchBar }
+      { !hideSearchBar && searchBar }
     </Box>
   );
 };