fix: footer hydration issues

src/app/layout.tsx

@@ -6,6 +6,7 @@ import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
 import { ReactNode } from 'react';
+import { Footer } from '../components/Footer';
 import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar';
 import { Party3 } from '../components/Party3';
 import { Checks } from './components/Checks';
@@ -80,7 +81,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
               {children}
             </Suspense> */}
 
-            {/* {!isEmbed && <Footer />} */}
+            {!isEmbed && <Footer />}
           </Flex>
         </Theme>
       </body>

src/components/Footer/index.css.ts

@@ -0,0 +1,14 @@
+import { style } from '@vanilla-extract/css';
+
+export const containerInner = style({
+  justifyContent: 'space-between',
+  width: '100%',
+  maxWidth: 800,
+  padding: '0 16px',
+
+  '@media': {
+    'screen and (max-width: 640px)': {
+      justifyContent: 'center',
+    },
+  },
+});

src/components/Footer/index.tsx

@@ -3,12 +3,10 @@
 import { Code, Flex, Link, Spinner, Text, Theme } from '@radix-ui/themes';
 import { Suspense } from 'react';
 import packageJSON from '../../../package.json';
-import { useWideFormat } from '../../hooks/useWideFormat';
 import { WoTBVersion } from './components/WoTBVersion';
+import * as styles from './index.css';
 
 export function Footer() {
-  const wideFormat = useWideFormat(640);
-
   return (
     <Theme radius="none">
       <Flex
@@ -20,16 +18,7 @@ export function Footer() {
           backgroundColor: 'var(--color-panel)',
         }}
       >
-        <Flex
-          align="center"
-          justify={wideFormat ? 'between' : 'center'}
-          wrap="wrap"
-          style={{
-            width: '100%',
-            maxWidth: 800,
-            padding: '0 16px',
-          }}
-        >
+        <Flex align="center" wrap="wrap" className={styles.containerInner}>
           <Flex gap="1" justify="center" align="center">
             <Text color="gray" size="2">
               BlitzKit