From a5bbbfc960eba47cd8163417ac87fb862fd24bb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Sep 2024 23:00:37 -0500
Subject: [PATCH] feat: left-right hero

---
 .../tankopedia/[id]/components/Control.tsx    |  2 +-
 .../[id]/components/Model/HeroSection.tsx     | 67 +++++++++----------
 2 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Control.tsx b/src/app/tools/tankopedia/[id]/components/Control.tsx
index 6e715ad08..5eaa28946 100644
--- a/src/app/tools/tankopedia/[id]/components/Control.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Control.tsx
@@ -11,7 +11,7 @@ import { useAwait } from '../../../../../hooks/useAwait';
 import * as Duel from '../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';
 
-const initialPosition = [0, 6, -32] as const;
+const initialPosition = [0, 4, -18] as const;
 const poseDistances: Record<Pose, number> = {
   [Pose.HullDown]: 15,
   [Pose.FaceHug]: 5,
diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index 0961f5022..465466632 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
@@ -51,7 +51,8 @@ export function HeroSection() {
 
   return (
     <Flex justify="center" style={{ backgroundColor: Var('color-surface') }}>
-      <Box
+      <Flex
+        direction={{ initial: 'column', md: 'row' }}
         style={{
           backgroundColor: isFullScreen
             ? Var('color-background')
@@ -70,45 +71,43 @@ export function HeroSection() {
         left={isFullScreen ? '0' : undefined}
       >
         <Flex
-          position="absolute"
-          justify={{ initial: 'center', md: 'start' }}
-          width="100%"
-          mt={{ initial: '6', md: '-8' }}
-          top={{ initial: '0', md: '50%' }}
-          left={{ initial: '-4', md: '0' }}
-          pl={{ initial: '0', md: '8' }}
+          style={{ userSelect: 'none' }}
+          direction="column"
+          align={{ initial: 'center', md: 'start' }}
+          justify="center"
+          pl={{ initial: '0', md: '9' }}
+          pt={{ initial: '5', md: '0' }}
         >
-          <Flex direction="column" align={{ initial: 'center', md: 'start' }}>
-            <Heading
-              weight="bold"
-              size={{ initial: '8', xl: '9' }}
-              wrap="nowrap"
-              color={treeColor}
-            >
-              <Flex align="center" gap="3">
-                <Icon width="0.8em" height="0.8em" />
-                {protagonist.name}
-              </Flex>
-            </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>
 
-            <Text
-              color="gray"
-              size="3"
-              weight="light"
-              ml={{ initial: '0', md: '7', xl: '9' }}
-            >
-              BlitzKit Tankopedia
-            </Text>
-          </Flex>
+          <Text
+            color="gray"
+            size="3"
+            weight="light"
+            ml={{ initial: '0', md: '9' }}
+          >
+            BlitzKit Tankopedia
+          </Text>
         </Flex>
 
         <Box
-          position="absolute"
-          width="100%"
-          height="100%"
           className="tank-sandbox-container"
+          flexGrow="1"
+          flexBasis="0"
+          flexShrink="0"
+          position="relative"
         >
-          <Box width="100%" height="100%" position="absolute">
+          <Box position="absolute" width="100%" height="100%">
             <Box width="100%" height="100%">
               <TankSandboxLoader
                 id={protagonist.id}
@@ -130,7 +129,7 @@ export function HeroSection() {
             <Options canvas={canvas} thicknessRange={thicknessRange} />
           </Box>
         </Box>
-      </Box>
+      </Flex>
     </Flex>
   );
 }