fix: hero interactibility

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

@@ -94,7 +94,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
   return (
     <Flex justify="center">
       <Flex
-        direction={{ initial: 'column', md: 'row' }}
+        direction={{ initial: 'column-reverse', md: 'row' }}
         style={{
           zIndex: isFullScreen ? 2 : undefined,
           backgroundColor: 'black',
@@ -110,6 +110,49 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
         top={isFullScreen ? '0' : undefined}
         left={isFullScreen ? '0' : undefined}
       >
+        <Box
+          className="tank-sandbox-container"
+          flexGrow="1"
+          flexBasis="0"
+          flexShrink="0"
+          position="relative"
+        >
+          <Box position="absolute" width="100%" height="100%" overflow="hidden">
+            <Box
+              width="100%"
+              height="100%"
+              position="relative"
+              left={disturbed ? '0' : { initial: '0', md: '12.5%' }}
+              style={{ transitionDuration: '200ms' }}
+            >
+              {!revealed && (
+                <Spinner
+                  style={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    width: Var('space-6'),
+                    height: Var('space-6'),
+                  }}
+                />
+              )}
+
+              {/* {skeleton && <TankSandboxLoader id={protagonist.id} />} */}
+
+              <Suspense>
+                <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
+              </Suspense>
+            </Box>
+
+            <Options
+              skeleton={skeleton}
+              canvas={canvas}
+              thicknessRange={thicknessRange}
+            />
+          </Box>
+        </Box>
+
         <Flex
           className="tankopedia-title-bar"
           justify="center"
@@ -261,49 +304,6 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
             )}
           </Flex>
         </Flex>
-
-        <Box
-          className="tank-sandbox-container"
-          flexGrow="1"
-          flexBasis="0"
-          flexShrink="0"
-          position="relative"
-        >
-          <Box position="absolute" width="100%" height="100%" overflow="hidden">
-            <Box
-              width="100%"
-              height="100%"
-              position="relative"
-              left={disturbed ? '0' : { initial: '0', md: '12.5%' }}
-              style={{ transitionDuration: '200ms' }}
-            >
-              {!revealed && (
-                <Spinner
-                  style={{
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    transform: 'translate(-50%, -50%)',
-                    width: Var('space-6'),
-                    height: Var('space-6'),
-                  }}
-                />
-              )}
-
-              {/* {skeleton && <TankSandboxLoader id={protagonist.id} />} */}
-
-              <Suspense>
-                <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
-              </Suspense>
-            </Box>
-
-            <Options
-              skeleton={skeleton}
-              canvas={canvas}
-              thicknessRange={thicknessRange}
-            />
-          </Box>
-        </Box>
       </Flex>
     </Flex>
   );