From 73f1851f3cf139eb706b306236c10a669f2c3fd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 7 Jun 2024 12:37:22 -0500
Subject: [PATCH] fix: centered footer

---
 package.json                    |  2 +-
 src/components/Footer/index.tsx | 39 +++++++++++++++++++++++++++++----
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index af98f0f5d..19cbb8d43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "blitzkit",
-  "version": "1.20.3",
+  "version": "1.20.4",
   "description": "🎉 Tools for everything World of Tanks Blitz",
   "main": "src/server.ts",
   "type": "module",
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 86515df49..27979740f 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -20,14 +20,20 @@ export function Footer() {
           justify="between"
           maxWidth="640px"
           flexGrow="1"
-          gap="6"
+          gap="5"
           position="relative"
           direction={{
             initial: 'column',
             sm: 'row',
           }}
         >
-          <Flex direction="column">
+          <Flex
+            direction="column"
+            align={{
+              initial: 'center',
+              sm: 'start',
+            }}
+          >
             <Heading>
               BlitzKit{' '}
               <Text color="gray" size="1" weight="regular">
@@ -38,7 +44,13 @@ export function Footer() {
             <Text color="gray">Everything World of Tanks Blitz</Text>
           </Flex>
 
-          <Flex gap="6">
+          <Flex
+            gap="6"
+            width={{
+              initial: '100%',
+              sm: 'auto',
+            }}
+          >
             <Flex
               direction="column"
               gap="1"
@@ -46,6 +58,14 @@ export function Footer() {
                 initial: 'end',
                 sm: 'start',
               }}
+              flexGrow={{
+                initial: '1',
+                sm: '0',
+              }}
+              flexBasis={{
+                initial: '0',
+                sm: 'auto',
+              }}
             >
               <Heading size="3">About</Heading>
               <Flex
@@ -80,7 +100,18 @@ export function Footer() {
               </Flex>
             </Flex>
 
-            <Flex direction="column" gap="1">
+            <Flex
+              direction="column"
+              gap="1"
+              flexGrow={{
+                initial: '1',
+                sm: '0',
+              }}
+              flexBasis={{
+                initial: '0',
+                sm: 'auto',
+              }}
+            >
               <Heading size="3">Legal</Heading>
               <Flex direction="column">
                 <Link href="/docs/legal/privacy-policy" color="gray">