feat: trim header

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -91,6 +91,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
         top={isFullScreen ? '0' : undefined}
         left={isFullScreen ? '0' : undefined}
       >
+        <Flex justify="center">
           <Flex
             display={isFullScreen ? 'none' : 'flex'}
             style={{ userSelect: 'none' }}
@@ -99,28 +100,35 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
             justify="center"
             pl={{ initial: '0', md: '9' }}
             pt={{ initial: '5', md: '0' }}
+            overflow="hidden"
+            flexGrow="1"
+            maxWidth="40rem"
           >
+            <Flex align="center" gap="2">
+              <Heading size={{ initial: '7', lg: '8' }}>
+                <Icon width="1em" height="1em" />
+              </Heading>
+
               <Heading
                 weight="bold"
                 size={{ initial: '8', lg: '9' }}
                 wrap="nowrap"
                 color={treeColor}
               >
-            <Flex align="center" gap="3">
-              <Icon width="0.8em" height="0.8em" />
                 {protagonist.name}
-            </Flex>
               </Heading>
+            </Flex>
 
             <Text
               color="gray"
               size="3"
               weight="light"
-            ml={{ initial: '0', md: '7', lg: '9' }}
+              ml={{ initial: '0', md: '7', lg: '8' }}
             >
               BlitzKit Tankopedia
             </Text>
           </Flex>
+        </Flex>
 
         <Box
           className="tank-sandbox-container"