From a961643c7608f8591edc967c8e6dd8d0265731ab 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:35:59 -0500
Subject: [PATCH] feat: better ratios of hero

---
 .../Model/CharacteristicsSection.tsx          |  5 +-
 .../[id]/components/Model/HeroSection.tsx     | 56 +++++++++++--------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx
index ef32a15e7..03e7ecb99 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx
@@ -1,4 +1,5 @@
 import { Flex, Heading } from '@radix-ui/themes';
+import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { Characteristics } from '../Characteristics';
 import { Consumables } from '../Characteristics/components/Consumables';
 import { Equipment } from '../Characteristics/components/Equipment';
@@ -8,8 +9,10 @@ import { Provisions } from '../Characteristics/components/Provisions';
 import { Skills } from '../Characteristics/components/Skills';
 
 export function CharacteristicsSection() {
+  const wideFormat = useWideFormat(720);
+
   return (
-    <Flex justify="center" mt="4">
+    <Flex justify="center" mt="4" direction={wideFormat ? 'row' : 'column'}>
       <Flex gap="4">
         <Flex style={{ flex: 1, maxWidth: 320 }} direction="column" gap="4">
           <Heading>Configure</Heading>
diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index 8a017140e..0cd2f89af 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
@@ -18,7 +18,7 @@ export function HeroSection() {
   return (
     <Flex
       justify="center"
-      pl={wideFormat ? '9' : undefined}
+      // pl={wideFormat ? '9' : undefined}
       p={wideFormat ? '0' : '6'}
       pb={wideFormat ? '0' : '6'}
       style={{
@@ -53,7 +53,7 @@ export function HeroSection() {
         <div
           style={{
             height: 512,
-            flex: wideFormat ? 3 : undefined,
+            flex: wideFormat ? 2 : undefined,
             position: 'relative',
           }}
         >
@@ -61,31 +61,39 @@ export function HeroSection() {
             style={{
               width: '100%',
               height: '100%',
-            }}
-          >
-            <TankSandbox />
-          </div>
-
-          <Flex
-            style={{
               position: 'absolute',
-              bottom: 16,
-              left: '50%',
-              transform: 'translateX(-50%)',
-              cursor: 'default',
-              userSelect: 'none',
-            }}
-            align="center"
-            gap="2"
-            onClick={() => {
-              mutateTankopediaPersistent((draft) => {
-                draft.mode = draft.mode === 'armor' ? 'model' : 'armor';
-              });
             }}
           >
-            <Checkbox checked={mode === 'armor'} />
-            Armor
-          </Flex>
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              <TankSandbox />
+            </div>
+
+            <Flex
+              style={{
+                position: 'absolute',
+                bottom: 16,
+                left: '50%',
+                transform: 'translateX(-50%)',
+                cursor: 'default',
+                userSelect: 'none',
+              }}
+              align="center"
+              gap="2"
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.mode = draft.mode === 'armor' ? 'model' : 'armor';
+                });
+              }}
+            >
+              <Checkbox checked={mode === 'armor'} />
+              Armor
+            </Flex>
+          </div>
         </div>
       </Flex>