feat: characteristics section

src/app/tools/compare/components/CompareTable.tsx

@@ -509,7 +509,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                           <ConsumablesManager
                             consumables={consumablesList}
                             selected={consumables}
-                            onChange={(consumables) => {
+                            onConsumablesChange={(consumables) => {
                               mutateCompareEphemeral((draft) => {
                                 draft.members[index].consumables = consumables;
                               });

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

@@ -10,7 +10,12 @@ export function ConfigurationChildWrapper({
   ...props
 }: ConfigurationChildWrapperProps) {
   return (
-    <Flex gap="2" direction="column" {...props}>
+    <Flex
+      gap="2"
+      direction="column"
+      align={{ initial: 'center', sm: 'start' }}
+      {...props}
+    >
       {children}
     </Flex>
   );

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

@@ -77,11 +77,12 @@ export function Consumables() {
         hasConsumableDeliverySystem={hasConsumableDeliverySystem}
         hasHighEndConsumables={hasHighEndConsumables}
         timers
-        onChange={(consumables) => {
+        onConsumablesChange={(consumables) => {
           mutateDuel((draft) => {
             draft.protagonist.consumables = consumables;
           });
         }}
+        justify={{ initial: 'center', sm: 'start' }}
       />
     </ConfigurationChildWrapper>
   );

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

@@ -214,9 +214,7 @@ export function Modules() {
               align="center"
               direction="column"
               gap="2"
-              style={{
-                position: 'relative',
-              }}
+              position="relative"
             >
               {unlock.cost.value > 0 && (
                 <>

src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx

@@ -12,11 +12,17 @@ export function CharacteristicsSection() {
     <Flex mt="4" px="4" style={{ boxSizing: 'border-box' }} gap="6">
       <Flex
         flexGrow="1"
-        gap="6"
+        gap="9"
         justify="center"
+        align={{ initial: 'center', sm: 'start' }}
         direction={{ initial: 'column', sm: 'row' }}
       >
-        <Flex direction="column" gap="4" maxWidth="21rem">
+        <Flex
+          direction="column"
+          gap="6"
+          maxWidth="21rem"
+          align={{ initial: 'center', sm: 'start' }}
+        >
           <Heading>Configuration</Heading>
           <Modules />
           <Equipment />
@@ -27,14 +33,14 @@ export function CharacteristicsSection() {
         </Flex>
         <Flex
           flexGrow="1"
-          maxWidth={{
-            initial: 'unset',
-            md: '640px',
-          }}
+          maxWidth={{ initial: '20rem', md: '40rem' }}
           direction="column"
-          gap="4"
+          gap="6"
+          width="100%"
         >
-          <Heading>Characteristics</Heading>
+          <Heading align={{ initial: 'center', sm: 'left' }}>
+            Characteristics
+          </Heading>
           <Characteristics />
         </Flex>
       </Flex>

src/app/tools/tankopedia/[id]/components/Model/GameModeSection.tsx

@@ -27,7 +27,7 @@ export function GameModeSection() {
           return (
             <Flex
               key={id}
-              width="14rem"
+              width="16rem"
               height="20rem"
               overflow="hidden"
               direction="column"

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

@@ -27,7 +27,7 @@ export function MetaSection() {
           justify="center"
           direction={{ initial: 'column', sm: 'row' }}
         >
-          <Flex direction="column" minWidth="12rem">
+          <Flex direction="column" minWidth="15rem">
             <Heading mb="2" align={{ initial: 'center', sm: 'left' }}>
               Overview
             </Heading>