feat: sticky sandbox

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -9,13 +9,51 @@ import { Info } from './components/Info';
 import { Modules } from './components/Modules';
 import { Provisions } from './components/Provisions';
 
-export function Characteristics() {
+interface CharacteristicsProps {
+  config?: boolean;
+}
+
+export function Characteristics({ config }: CharacteristicsProps) {
   const [configureVisible, setConfigureVisible] = useState(true);
   const [statsVisible, setStatsVisible] = useState(true);
 
   return (
-    <Flex gap="8" wrap="wrap">
+    <Flex gap="8" direction="column" wrap="wrap">
-      <Flex style={{ flex: 1, minWidth: 320 }} direction="column" gap="4">
+      {config && (
+        <Flex
+          style={{ flex: 1, minWidth: 320, position: 'sticky', top: 64 }}
+          direction="column"
+          gap="4"
+        >
+          <Heading
+            onClick={() => setConfigureVisible((state) => !state)}
+            style={{
+              cursor: 'pointer',
+            }}
+          >
+            Configure{' '}
+            {configureVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
+          </Heading>
+
+          {configureVisible && (
+            <Flex direction="column" gap="4">
+              <Modules />
+              <Equipments />
+              <Crew />
+              <Consumables />
+              <Provisions />
+              <Camouflage />
+            </Flex>
+          )}
+        </Flex>
+      )}
+
+      {!config && (
+        <Flex
+          style={{ flex: 1, minWidth: 320, position: 'sticky', top: 64 }}
+          direction="column"
+          gap="4"
+        >
           <Heading
             onClick={() => setStatsVisible((state) => !state)}
             style={{
@@ -80,13 +118,23 @@ export function Characteristics() {
                   value="36.86"
                   unit="hp/kg"
                 />
-              <Info indent name="On soft terrain" value="36.86" unit="hp/kg" />
+                <Info
+                  indent
+                  name="On soft terrain"
+                  value="36.86"
+                  unit="hp/kg"
+                />
                 <Info
                   name="Traverse speed on hard terrain"
                   value="36.86"
                   unit="°/s"
                 />
-              <Info indent name="On medium terrain" value="36.86" unit="°/s" />
+                <Info
+                  indent
+                  name="On medium terrain"
+                  value="36.86"
+                  unit="°/s"
+                />
                 <Info indent name="On soft terrain" value="36.86" unit="°/s" />
               </Flex>
 
@@ -96,7 +144,12 @@ export function Characteristics() {
                 <Info name="Size" value="6.21 x 2.43 x 2.00" unit="m" />
                 <Info name="Camouflage when still" value="30.00" unit="%" />
                 <Info indent name="When moving" value="30.00" unit="%" />
-              <Info indent name="When shooting still" value="30.00" unit="%" />
+                <Info
+                  indent
+                  name="When shooting still"
+                  value="30.00"
+                  unit="%"
+                />
                 <Info
                   indent
                   name="When shooting while moving"
@@ -107,28 +160,7 @@ export function Characteristics() {
             </Flex>
           )}
         </Flex>
-
-      <Flex style={{ flex: 1, minWidth: 320 }} direction="column" gap="4">
-        <Heading
-          onClick={() => setConfigureVisible((state) => !state)}
-          style={{
-            cursor: 'pointer',
-          }}
-        >
-          Configure {configureVisible ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        </Heading>
-
-        {configureVisible && (
-          <Flex direction="column" gap="4">
-            <Modules />
-            <Equipments />
-            <Crew />
-            <Consumables />
-            <Provisions />
-            <Camouflage />
-          </Flex>
       )}
     </Flex>
-    </Flex>
   );
 }

src/app/tools/tankopedia/[id]/page.tsx

@@ -76,13 +76,34 @@ export default function Page({ params }: { params: { id: string } }) {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [id]);
+  }, [id, assigned]);
 
   return (
-    <PageWrapper color="purple">
+    <PageWrapper color="purple" size="full">
       {assigned && (
-        <Flex gap="8" direction="column">
+        <Flex style={{ width: '100%' }} justify="center">
-          <Flex gap="4" direction="column">
+          <Flex
+            gap="8"
+            direction="row"
+            align="start"
+            justify="center"
+            style={{
+              width: '100%',
+              // maxWidth: 1024,
+            }}
+          >
+            <Characteristics config />
+
+            <Flex
+              gap="4"
+              direction="column"
+              style={{
+                flex: 1,
+                maxWidth: 640,
+                position: 'sticky',
+                top: 64,
+              }}
+            >
               <Title />
               <TankSandbox />
               <AntagonistBar />
@@ -90,6 +111,7 @@ export default function Page({ params }: { params: { id: string } }) {
 
             <Characteristics />
           </Flex>
+        </Flex>
       )}
     </PageWrapper>
   );

src/components/PageWrapper.tsx

@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
 
 interface PageWrapperProps extends ComponentProps<typeof Flex> {
   color?: ComponentProps<typeof Theme>['accentColor'];
-  size?: 'regular' | 'wide';
+  size?: 'regular' | 'wide' | 'full';
 }
 
 export default function PageWrapper({
@@ -19,7 +19,7 @@ export default function PageWrapper({
         gap="4"
         style={{
           width: '100%',
-          maxWidth: size === 'regular' ? 800 : 960,
+          maxWidth: size === 'regular' ? 800 : size === 'full' ? '100%' : 960,
           margin: 'auto',
           padding: 16,
           boxSizing: 'border-box',