fixes after merge

ui/pages/App.tsx

@@ -5,8 +5,8 @@ import Page from 'ui/shared/Page/Page';
 
 const App = () => {
   return (
-    <Page wrapChildren={ false } rowGap={ 10 }>
-      <Center bgColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') } h="100%" w="100%" flexGrow={ 1 }>
+    <Page wrapChildren={ false }>
+      <Center as="main" bgColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') } h="100%" paddingTop={{ base: '138px', lg: 0 }}>
         3rd party app content
       </Center>
     </Page>

ui/shared/Page/Page.tsx

-import { chakra, VStack, Box, HStack } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import * as cookies from 'lib/cookies';
 import useFetch from 'lib/hooks/useFetch';
+import PageContent from 'ui/shared/Page/PageContent';
 import Header from 'ui/snippets/header/Header';
 import NavigationDesktop from 'ui/snippets/navigation/NavigationDesktop';
 
 interface Props {
   children: React.ReactNode;
   wrapChildren?: boolean;
-  className?: string;
 }
 
-const Page = ({ children }: Props) => {
+const Page = ({ children, wrapChildren = true }: Props) => {
   const router = useRouter();
   const fetch = useFetch();
 
@@ -32,31 +32,19 @@ const Page = ({ children }: Props) => {
     }
   }, [ networkType, networkSubType ]);
 
+  const renderedChildren = wrapChildren ? (
+    <PageContent>{ children }</PageContent>
+  ) : children;
+
   return (
-    <HStack
-      w="100%"
-      minH="100vh"
-      alignItems="stretch"
-    >
+    <Flex w="100%" minH="100vh" alignItems="stretch">
       <NavigationDesktop/>
-      <VStack
-        width="100%"
-        paddingX={{ base: 4, lg: 8 }}
-        paddingTop={{ base: 0, lg: 9 }}
-        paddingBottom={ 10 }
-        spacing={ 0 }
-      >
+      <Flex flexDir="column" width="100%">
         <Header/>
-        <Box
-          as="main"
-          w="100%"
-          paddingTop={{ base: '138px', lg: '52px' }}
-        >
-          { children }
-        </Box>
-      </VStack>
-    </HStack>
+        { renderedChildren }
+      </Flex>
+    </Flex>
   );
 };
 
-export default chakra(Page);
+export default Page;

ui/snippets/header/Header.tsx

@@ -40,6 +40,9 @@ const Header = () => {
         justifyContent="center"
         gap={ 12 }
         display={{ base: 'none', lg: 'flex' }}
+        paddingX={ 12 }
+        paddingTop={ 9 }
+        paddingBottom="52px"
       >
         <SearchBar/>
         <ColorModeToggler/>