From ea7f40a808e9b72708dc3a711d2ebea8be7bed6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 3 May 2024 17:26:14 -0500
Subject: [PATCH] feat: center name

---
 .../[id]/components/Model/HeroSection.tsx     | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index e17dc952c..8a017140e 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
@@ -1,6 +1,5 @@
 import { Checkbox, Flex, Heading, Text } from '@radix-ui/themes';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
-import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import strings from '../../../../../../lang/en-US.json';
 import { theme } from '../../../../../../stitches.config';
@@ -14,7 +13,6 @@ import { Options } from './components/Options';
 export function HeroSection() {
   const tank = useDuel((state) => state.protagonist!.tank);
   const mode = useTankopediaPersistent((state) => state.mode);
-  const isFullScreen = useFullScreen();
   const wideFormat = useWideFormat(880);
 
   return (
@@ -36,19 +34,20 @@ export function HeroSection() {
         }}
       >
         <Flex
-          direction="column"
+          align="center"
           justify="center"
-          gap={wideFormat ? '4' : '2'}
           style={{
             flex: 1,
           }}
         >
-          <Heading size={wideFormat ? '9' : '8'}>{tank.name}</Heading>
-          <Text color="gray">
-            Tier {TIER_ROMAN_NUMERALS[tank.tier]}{' '}
-            {(strings.common.nations as Record<string, string>)[tank.nation]}{' '}
-            {strings.common.tank_class_short[tank.class]}
-          </Text>
+          <Flex gap={wideFormat ? '4' : '2'} direction="column">
+            <Heading size={wideFormat ? '9' : '8'}>{tank.name}</Heading>
+            <Text color="gray">
+              Tier {TIER_ROMAN_NUMERALS[tank.tier]}{' '}
+              {(strings.common.nations as Record<string, string>)[tank.nation]}{' '}
+              {strings.common.tank_class_short[tank.class]}
+            </Text>
+          </Flex>
         </Flex>
 
         <div