From 0924a777768cac68475392d20a4c3a6690136e8d Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 20 Apr 2025 21:13:40 -0500
Subject: [PATCH] fix: mas width for meta section

---
 .../Tankopedia/MetaSection/index.tsx          | 248 +++++++++---------
 1 file changed, 127 insertions(+), 121 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/MetaSection/index.tsx b/packages/website/src/components/Tankopedia/MetaSection/index.tsx
index ef108487f..56b53b7c6 100644
--- a/packages/website/src/components/Tankopedia/MetaSection/index.tsx
+++ b/packages/website/src/components/Tankopedia/MetaSection/index.tsx
@@ -25,154 +25,160 @@ export function MetaSection() {
   const { locale, strings } = useLocale();
 
   return (
-    <Box
-      style={{
-        background: `url(/assets/images/national-wallpapers/${protagonist.nation}.jpg)`,
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-        backgroundPosition:
-          NATIONAL_BANNER_POSITION_OVERRIDES[protagonist.nation] ?? 'center',
-      }}
-    >
+    <Flex justify="center">
       <Box
         style={{
-          background: `url(${asset(`flags/scratched/${protagonist.nation}.webp`)})`,
+          background: `url(/assets/images/national-wallpapers/${protagonist.nation}.jpg)`,
           backgroundRepeat: 'no-repeat',
-          backgroundSize: '53rem',
-          backgroundPosition: '-8rem 50%',
+          backgroundSize: 'cover',
+          backgroundPosition:
+            NATIONAL_BANNER_POSITION_OVERRIDES[protagonist.nation] ?? 'center',
         }}
+        flexGrow="1"
+        maxWidth="120rem"
       >
-        <Flex
-          justify="center"
-          align="center"
-          py="6rem"
+        <Box
           style={{
-            background: `linear-gradient(${Var('gray-1')}, ${Var('black-a8')}, ${Var('black-a8')}, ${Var('gray-1')})`,
+            background: `url(${asset(`flags/scratched/${protagonist.nation}.webp`)})`,
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '53rem',
+            backgroundPosition: '-8rem 50%',
           }}
         >
-          <Flex direction="column" align="center" gap="6">
-            <Flex
-              gap={{ initial: '2', sm: '8' }}
-              direction={{ initial: 'column', sm: 'row' }}
-            >
-              <Flex direction="column" width="100%" gap="2">
-                <Listing label={strings.website.tools.tankopedia.meta.nation}>
-                  <Flex align="center" gap="1">
-                    <img
-                      style={{ width: '1em', height: '1em' }}
-                      alt={protagonist.nation}
-                      src={asset(`flags/circle/${protagonist.nation}.webp`)}
-                    />
-                    {
-                      strings.common.nations[
-                        protagonist.nation as keyof typeof strings.common.nations
-                      ]
+          <Flex
+            justify="center"
+            align="center"
+            py="6rem"
+            style={{
+              background: `linear-gradient(${Var('gray-1')}, ${Var('black-a8')}, ${Var('black-a8')}, ${Var('gray-1')})`,
+            }}
+          >
+            <Flex direction="column" align="center" gap="6">
+              <Flex
+                gap={{ initial: '2', sm: '8' }}
+                direction={{ initial: 'column', sm: 'row' }}
+              >
+                <Flex direction="column" width="100%" gap="2">
+                  <Listing label={strings.website.tools.tankopedia.meta.nation}>
+                    <Flex align="center" gap="1">
+                      <img
+                        style={{ width: '1em', height: '1em' }}
+                        alt={protagonist.nation}
+                        src={asset(`flags/circle/${protagonist.nation}.webp`)}
+                      />
+                      {
+                        strings.common.nations[
+                          protagonist.nation as keyof typeof strings.common.nations
+                        ]
+                      }
+                    </Flex>
+                  </Listing>
+                  <Listing label={strings.website.tools.tankopedia.meta.class}>
+                    <Flex align="center" gap="1">
+                      <ClassIcon width="1em" height="1em" />
+                      {strings.common.tank_class_short[protagonist.class]}
+                    </Flex>
+                  </Listing>
+                  <Listing label={strings.website.tools.tankopedia.meta.tier}>
+                    {TIER_ROMAN_NUMERALS[protagonist.tier]}
+                  </Listing>
+                  <Listing
+                    label={strings.website.tools.tankopedia.meta.type}
+                    color={
+                      protagonist.type === TankType.COLLECTOR
+                        ? 'blue'
+                        : protagonist.type === TankType.PREMIUM
+                          ? 'amber'
+                          : undefined
                     }
-                  </Flex>
-                </Listing>
-                <Listing label={strings.website.tools.tankopedia.meta.class}>
-                  <Flex align="center" gap="1">
-                    <ClassIcon width="1em" height="1em" />
-                    {strings.common.tank_class_short[protagonist.class]}
-                  </Flex>
-                </Listing>
-                <Listing label={strings.website.tools.tankopedia.meta.tier}>
-                  {TIER_ROMAN_NUMERALS[protagonist.tier]}
-                </Listing>
-                <Listing
-                  label={strings.website.tools.tankopedia.meta.type}
-                  color={
-                    protagonist.type === TankType.COLLECTOR
-                      ? 'blue'
-                      : protagonist.type === TankType.PREMIUM
-                        ? 'amber'
-                        : undefined
-                  }
-                >
-                  {strings.common.tree_type[protagonist.type]}
-                </Listing>
-              </Flex>
+                  >
+                    {strings.common.tree_type[protagonist.type]}
+                  </Listing>
+                </Flex>
 
-              <Flex direction="column" width="100%" gap="2">
-                {developerMode && (
-                  <Listing label={strings.website.tools.tankopedia.meta.dev_id}>
-                    <Code>{protagonist.id}</Code>
-                  </Listing>
-                )}
-                {protagonist.type === TankType.PREMIUM && (
+                <Flex direction="column" width="100%" gap="2">
+                  {developerMode && (
+                    <Listing
+                      label={strings.website.tools.tankopedia.meta.dev_id}
+                    >
+                      <Code>{protagonist.id}</Code>
+                    </Listing>
+                  )}
+                  {protagonist.type === TankType.PREMIUM && (
+                    <Listing
+                      label={strings.website.tools.tankopedia.meta.purchase}
+                    >
+                      <Flex align="center" gap="1">
+                        {protagonist.price.value / 400}
+                        <img
+                          style={{ width: '1em', height: '1em' }}
+                          alt="gold"
+                          src={asset('icons/currencies/gold.webp')}
+                        />
+                      </Flex>
+                    </Listing>
+                  )}
                   <Listing
-                    label={strings.website.tools.tankopedia.meta.purchase}
+                    label={
+                      protagonist.type === TankType.RESEARCHABLE
+                        ? strings.website.tools.tankopedia.meta.purchase
+                        : strings.website.tools.tankopedia.meta.restoration
+                    }
                   >
                     <Flex align="center" gap="1">
-                      {protagonist.price.value / 400}
+                      {protagonist.price.value.toLocaleString(locale)}
                       <img
                         style={{ width: '1em', height: '1em' }}
-                        alt="gold"
-                        src={asset('icons/currencies/gold.webp')}
+                        alt={TankPriceType[protagonist.price.type]}
+                        src={asset(
+                          `icons/currencies/${
+                            protagonist.price.type === TankPriceType.GOLD
+                              ? 'gold'
+                              : 'silver'
+                          }.webp`,
+                        )}
                       />
                     </Flex>
                   </Listing>
-                )}
-                <Listing
-                  label={
-                    protagonist.type === TankType.RESEARCHABLE
-                      ? strings.website.tools.tankopedia.meta.purchase
-                      : strings.website.tools.tankopedia.meta.restoration
-                  }
-                >
-                  <Flex align="center" gap="1">
-                    {protagonist.price.value.toLocaleString(locale)}
-                    <img
-                      style={{ width: '1em', height: '1em' }}
-                      alt={TankPriceType[protagonist.price.type]}
-                      src={asset(
-                        `icons/currencies/${
-                          protagonist.price.type === TankPriceType.GOLD
-                            ? 'gold'
-                            : 'silver'
-                        }.webp`,
-                      )}
-                    />
-                  </Flex>
-                </Listing>
-                <Listing label={strings.website.tools.tankopedia.meta.sale}>
-                  <Flex align="center" gap="1">
-                    {(protagonist.price.value / 2).toLocaleString(locale)}
-                    <img
-                      style={{ width: '1em', height: '1em' }}
-                      alt={TankPriceType[protagonist.price.type]}
-                      src={asset(
-                        `icons/currencies/${
-                          protagonist.price.type === TankPriceType.GOLD
-                            ? 'gold'
-                            : 'silver'
-                        }.webp`,
-                      )}
-                    />
-                  </Flex>
-                </Listing>
-                {protagonist.research_cost && (
-                  <Listing
-                    label={strings.website.tools.tankopedia.meta.research}
-                  >
+                  <Listing label={strings.website.tools.tankopedia.meta.sale}>
                     <Flex align="center" gap="1">
-                      {(
-                        protagonist.research_cost.research_cost_type!
-                          .value as number
-                      ).toLocaleString(locale)}
+                      {(protagonist.price.value / 2).toLocaleString(locale)}
                       <img
                         style={{ width: '1em', height: '1em' }}
-                        alt="xp"
-                        src={asset('icons/currencies/xp.webp')}
+                        alt={TankPriceType[protagonist.price.type]}
+                        src={asset(
+                          `icons/currencies/${
+                            protagonist.price.type === TankPriceType.GOLD
+                              ? 'gold'
+                              : 'silver'
+                          }.webp`,
+                        )}
                       />
                     </Flex>
                   </Listing>
-                )}
+                  {protagonist.research_cost && (
+                    <Listing
+                      label={strings.website.tools.tankopedia.meta.research}
+                    >
+                      <Flex align="center" gap="1">
+                        {(
+                          protagonist.research_cost.research_cost_type!
+                            .value as number
+                        ).toLocaleString(locale)}
+                        <img
+                          style={{ width: '1em', height: '1em' }}
+                          alt="xp"
+                          src={asset('icons/currencies/xp.webp')}
+                        />
+                      </Flex>
+                    </Listing>
+                  )}
+                </Flex>
               </Flex>
             </Flex>
           </Flex>
-        </Flex>
+        </Box>
       </Box>
-    </Box>
+    </Flex>
   );
 }