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>

src/components/ConsumablesManager.tsx

@@ -1,30 +1,31 @@
-import { Flex } from '@radix-ui/themes';
+import { Flex, FlexProps } from '@radix-ui/themes';
 import { ConsumableEntry } from '../core/blitzkit/consumableDefinitions';
 import { ConsumableButton } from './ModuleButtons/ConsumableButton';
 
-interface ConsumablesManagerProps {
+type ConsumablesManagerProps = FlexProps & {
   consumables: ConsumableEntry[];
   selected: number[];
-  onChange?: (consumables: number[]) => void;
+  onConsumablesChange?: (consumables: number[]) => void;
   disabled?: boolean;
   timers?: boolean;
   hasHighEndConsumables?: boolean;
   hasConsumableDeliverySystem?: boolean;
   cooldownBooster?: number;
-}
+};
 
 export function ConsumablesManager({
   consumables,
   selected,
-  onChange,
+  onConsumablesChange,
   disabled,
   timers,
   hasConsumableDeliverySystem,
   cooldownBooster,
   hasHighEndConsumables,
+  ...props
 }: ConsumablesManagerProps) {
   return (
-    <Flex wrap="wrap" gap="2">
+    <Flex wrap="wrap" gap="2" {...props}>
       {consumables.map((consumable, index) => {
         const isSelected = selected.some((id) => id === consumable.id);
 
@@ -50,7 +51,7 @@ export function ConsumablesManager({
             consumable={consumable.id}
             selected={isSelected}
             onClick={() => {
-              if (!onChange) return;
+              if (!onConsumablesChange) return;
 
               const draft = [...selected];
 
@@ -60,7 +61,7 @@ export function ConsumablesManager({
                 draft.push(consumable.id);
               }
 
-              onChange(draft);
+              onConsumablesChange(draft);
             }}
           />
         );

src/components/ModuleButtons/ConsumableButton.tsx

@@ -25,6 +25,7 @@ export function ConsumableButton({
 
   return (
     <GenericTankComponentButton
+      style={{ width: '6rem' }}
       tooltip={awaitedConsumableDefinitions[consumable].name}
       icon={asset(`icons/consumables/${consumable}.webp`)}
       {...props}