feat: better layout

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

@@ -32,7 +32,7 @@ export function Info({
       style={{ width: '100%', paddingLeft: indent ? 24 : 0 }}
       gap="4"
     >
-      <Text color={highlight ? 'amber' : undefined}>
+      <Text color={highlight ? 'amber' : 'gray'}>
         {name}
         {unit != undefined && (
           <>

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

@@ -25,12 +25,14 @@ import {
 } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import { useFullScreen } from '../../../../../../hooks/useFullScreen';
+import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
 import { useTankopediaTemporary } from '../../../../../../stores/tankopedia';
 import { Info } from './components/Info';
 import { InfoWithDelta } from './components/InfoWithDelta';
 
 export function Characteristics() {
+  const wideFormat = useWideFormat(960);
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
   const awaitedModelDefinitions = use(modelDefinitions);
   const awaitedProvisionDefinitions = use(provisionDefinitions);
@@ -128,7 +130,8 @@ export function Characteristics() {
   if (isFullScreen) return null;
 
   return (
-    <Flex direction="column" gap="8">
+    <Flex direction={wideFormat ? 'row' : 'column'} gap="8" wrap="wrap">
+      <Flex direction="column" gap="8" style={{ flex: 1 }}>
         <Flex direction="column" gap="2">
           <Flex align="center" gap="4">
             <Heading size="5">Fire</Heading>
@@ -248,7 +251,8 @@ export function Characteristics() {
                 {lerp(
                   shell.penetration[0],
                   shell.penetration[1],
-                (penetrationDistance * penetrationLossOverDistanceCoefficient) /
+                  (penetrationDistance *
+                    penetrationLossOverDistanceCoefficient) /
                     500,
                 ) * penetrationCoefficient}
               </InfoWithDelta>
@@ -419,7 +423,68 @@ export function Characteristics() {
             </>
           )}
         </Flex>
+        <Flex direction="column" gap="2">
+          <Flex gap="2" align="center">
+            <Heading size="5">Crew training</Heading>
 
+            <Popover.Root>
+              <Popover.Trigger>
+                <IconButton variant="ghost">
+                  <InfoCircledIcon />
+                </IconButton>
+              </Popover.Trigger>
+
+              <Popover.Content>
+                <Flex gap="1" align="center">
+                  <AccessibilityIcon />
+                  <Text>
+                    represents the other roles a crew member can take.
+                  </Text>
+                </Flex>
+              </Popover.Content>
+            </Popover.Root>
+          </Flex>
+
+          {tank.crew.map((member) => {
+            const count = member.count ?? 1;
+
+            return (
+              <Fragment key={member.type}>
+                <InfoWithDelta
+                  key={`${member.type}-root`}
+                  name={`${CREW_MEMBER_NAMES[member.type]}${count > 1 ? ` x ${count}` : ''}`}
+                  unit="%"
+                  decimals={0}
+                >
+                  {(member.type === 'commander'
+                    ? commanderMastery
+                    : crewMemberMastery) * 100}
+                </InfoWithDelta>
+                {member.substitute && (
+                  <Info
+                    key={`${member.type}-substitute`}
+                    indent
+                    name={
+                      <>
+                        <Flex align="center" gap="1">
+                          <AccessibilityIcon />
+                          {member.substitute
+                            .map((sub, index) =>
+                              index === 0 ? CREW_MEMBER_NAMES[sub] : sub,
+                            )
+                            .join(', ')}
+                        </Flex>
+                      </>
+                    }
+                  />
+                )}
+              </Fragment>
+            );
+          })}
+        </Flex>
+      </Flex>
+
+      <Flex direction="column" gap="8" style={{ flex: 1 }}>
         <Flex direction="column" gap="2">
           <Heading size="5">Maneuverability</Heading>
           <Info name="Speed" unit="km/hr" />
@@ -464,7 +529,6 @@ export function Characteristics() {
             {stats.hullTraverseSoftTerrain}
           </InfoWithDelta>
         </Flex>
-
         <Flex direction="column" gap="2">
           <Heading size="5">Survivability</Heading>
           <InfoWithDelta name="Health" unit="hp" decimals={0}>
@@ -510,63 +574,6 @@ export function Characteristics() {
             {stats.volume}
           </Info>
         </Flex>
-
-      <Flex direction="column" gap="2">
-        <Flex gap="2" align="center">
-          <Heading size="5">Crew training</Heading>
-
-          <Popover.Root>
-            <Popover.Trigger>
-              <IconButton variant="ghost">
-                <InfoCircledIcon />
-              </IconButton>
-            </Popover.Trigger>
-
-            <Popover.Content>
-              <Flex gap="1" align="center">
-                <AccessibilityIcon />
-                <Text>represents the other roles a crew member can take.</Text>
-              </Flex>
-            </Popover.Content>
-          </Popover.Root>
-        </Flex>
-
-        {tank.crew.map((member) => {
-          const count = member.count ?? 1;
-
-          return (
-            <Fragment key={member.type}>
-              <InfoWithDelta
-                key={`${member.type}-root`}
-                name={`${CREW_MEMBER_NAMES[member.type]}${count > 1 ? ` x ${count}` : ''}`}
-                unit="%"
-                decimals={0}
-              >
-                {(member.type === 'commander'
-                  ? commanderMastery
-                  : crewMemberMastery) * 100}
-              </InfoWithDelta>
-              {member.substitute && (
-                <Info
-                  key={`${member.type}-substitute`}
-                  indent
-                  name={
-                    <>
-                      <Flex align="center" gap="1">
-                        <AccessibilityIcon />
-                        {member.substitute
-                          .map((sub, index) =>
-                            index === 0 ? CREW_MEMBER_NAMES[sub] : sub,
-                          )
-                          .join(', ')}
-                      </Flex>
-                    </>
-                  }
-                />
-              )}
-            </Fragment>
-          );
-        })}
       </Flex>
     </Flex>
   );

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

@@ -1,5 +1,4 @@
 import { Flex, Heading } from '@radix-ui/themes';
-import PageWrapper from '../../../../../../components/PageWrapper';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { Characteristics } from '../Characteristics';
 import { Consumables } from '../Characteristics/components/Consumables';
@@ -10,16 +9,25 @@ import { Provisions } from '../Characteristics/components/Provisions';
 import { Skills } from '../Characteristics/components/Skills';
 
 export function CharacteristicsSection() {
-  const wideFormat = useWideFormat(720);
+  const wideFormat = useWideFormat(700);
 
   return (
-    <PageWrapper >
+    <Flex
+      align="center"
+      px="4"
+      style={{
+        boxSizing: 'border-box',
+      }}
+      direction={wideFormat ? 'row' : 'column'}
+      mt="4"
+    >
       <Flex
         gap="6"
         style={{ width: '100%' }}
         direction={wideFormat ? 'row' : 'column'}
+        justify="center"
       >
-        <Flex style={{ flex: 1, maxWidth: 480 }} direction="column" gap="4">
+        <Flex style={{ flex: 1, maxWidth: 380 }} direction="column" gap="4">
           <Heading>Configure</Heading>
           <Modules />
           <Equipment />
@@ -30,7 +38,11 @@ export function CharacteristicsSection() {
         </Flex>
 
         <Flex
-          style={{ flex: 1, width: wideFormat ? undefined : '100%' }}
+          style={{
+            flex: 1,
+            maxWidth: wideFormat ? 640 : undefined,
+            minWidth: 320,
+          }}
           direction="column"
           gap="4"
         >
@@ -38,6 +50,6 @@ export function CharacteristicsSection() {
           <Characteristics />
         </Flex>
       </Flex>
-    </PageWrapper>
+    </Flex>
   );
 }

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

@@ -25,7 +25,7 @@ export function HeroSection() {
       style={{
         background: `linear-gradient(${wideFormat ? -90 : 180}deg, ${theme.colors.appBackground1}, ${theme.colors.appBackground2})`,
         position: 'relative',
-        height: wideFormat ? undefined : 'calc(87.5vh - 64px)',
+        height: wideFormat ? undefined : 'calc(75vh - 64px)',
       }}
       gap="4"
     >

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

@@ -124,7 +124,12 @@ export function TechTreeSection() {
     <PageWrapper
       style={{
         position: 'relative',
+      }}
+      containerProps={{
+        style: {
           overflow: 'hidden',
+          marginTop: 16,
+        },
       }}
       size={tank.ancestors && tank.successors ? 880 : 480}
       gap="0"

src/components/PageWrapper.tsx

@@ -8,6 +8,7 @@ type PageWrapperProps = FlexProps & {
   noPadding?: boolean;
   noMaxWidth?: boolean;
   highlight?: boolean;
+  containerProps?: ComponentProps<typeof Theme>;
 };
 
 export default function PageWrapper({
@@ -18,6 +19,7 @@ export default function PageWrapper({
   noPadding = false,
   noMaxWidth = false,
   highlight = false,
+  containerProps,
   ...props
 }: PageWrapperProps) {
   return (
@@ -30,7 +32,9 @@ export default function PageWrapper({
         background: highlight
           ? `linear-gradient(-90deg, ${theme.colors.appBackground1}, ${theme.colors.appBackground2})`
           : undefined,
+        ...containerProps?.style,
       }}
+      {...containerProps}
     >
       <Flex
         direction="column"