From a08107d0b2d5f46cf60561aa7621556c54994423 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 24 Nov 2024 21:03:19 -0600
Subject: [PATCH] feat: trim header

---
 .../Tankopedia/HeroSection/index.tsx          | 62 +++++++++++--------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/HeroSection/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/index.tsx
index 2dd611735..3d7af3e72 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/index.tsx
@@ -91,35 +91,43 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
         top={isFullScreen ? '0' : undefined}
         left={isFullScreen ? '0' : undefined}
       >
-        <Flex
-          display={isFullScreen ? 'none' : 'flex'}
-          style={{ userSelect: 'none' }}
-          direction="column"
-          align={{ initial: 'center', md: 'start' }}
-          justify="center"
-          pl={{ initial: '0', md: '9' }}
-          pt={{ initial: '5', md: '0' }}
-        >
-          <Heading
-            weight="bold"
-            size={{ initial: '8', lg: '9' }}
-            wrap="nowrap"
-            color={treeColor}
+        <Flex justify="center">
+          <Flex
+            display={isFullScreen ? 'none' : 'flex'}
+            style={{ userSelect: 'none' }}
+            direction="column"
+            align={{ initial: 'center', md: 'start' }}
+            justify="center"
+            pl={{ initial: '0', md: '9' }}
+            pt={{ initial: '5', md: '0' }}
+            overflow="hidden"
+            flexGrow="1"
+            maxWidth="40rem"
           >
-            <Flex align="center" gap="3">
-              <Icon width="0.8em" height="0.8em" />
-              {protagonist.name}
-            </Flex>
-          </Heading>
+            <Flex align="center" gap="2">
+              <Heading size={{ initial: '7', lg: '8' }}>
+                <Icon width="1em" height="1em" />
+              </Heading>
 
-          <Text
-            color="gray"
-            size="3"
-            weight="light"
-            ml={{ initial: '0', md: '7', lg: '9' }}
-          >
-            BlitzKit Tankopedia
-          </Text>
+              <Heading
+                weight="bold"
+                size={{ initial: '8', lg: '9' }}
+                wrap="nowrap"
+                color={treeColor}
+              >
+                {protagonist.name}
+              </Heading>
+            </Flex>
+
+            <Text
+              color="gray"
+              size="3"
+              weight="light"
+              ml={{ initial: '0', md: '7', lg: '8' }}
+            >
+              BlitzKit Tankopedia
+            </Text>
+          </Flex>
         </Flex>
 
         <Box