feat: more responsive

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Crew.tsx

@@ -9,6 +9,7 @@ import { useLocale } from '../../../../../../hooks/useLocale';
 import { Duel } from '../../../../../../stores/duel';
 import type { StatsAcceptorProps } from './HullTraverseVisualizer';
 import { InfoWithDelta } from './InfoWithDelta';
+import { StatsTableWrapper } from './StatsTableWrapper';
 
 const provisionDefinitions = await awaitableProvisionDefinitions;
 
@@ -28,7 +29,7 @@ export function Crew({ stats }: StatsAcceptorProps) {
   const commanderMastery = 1 + provisionCrewBonus;
 
   return (
-    <Flex direction="column" gap="2" width="16rem">
+    <StatsTableWrapper>
       <Flex gap="2" align="center">
         <Heading size="5">
           {strings.website.tools.tankopedia.crew.title}
@@ -107,6 +108,6 @@ export function Crew({ stats }: StatsAcceptorProps) {
           </Fragment>
         );
       })}
-    </Flex>
+    </StatsTableWrapper>
   );
 }

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Firepower.tsx

@@ -25,6 +25,7 @@ import type { StatsAcceptorProps } from './HullTraverseVisualizer';
 import { Info } from './Info';
 import { InfoWithDelta } from './InfoWithDelta';
 import { RicochetVisualizer } from './RicochetVisualizer';
+import { StatsTableWrapper } from './StatsTableWrapper';
 
 export function Firepower({ stats }: StatsAcceptorProps) {
   const mutateDuel = Duel.useMutation();
@@ -57,7 +58,7 @@ export function Firepower({ stats }: StatsAcceptorProps) {
   }, [penetrationDistance]);
 
   return (
-    <Flex direction="column" gap="2" width="16rem">
+    <StatsTableWrapper>
       <Flex align="center" gap="4">
         <Heading size="5">
           {strings.website.tools.tankopedia.firepower.title}
@@ -409,6 +410,6 @@ export function Firepower({ stats }: StatsAcceptorProps) {
           />
         </>
       )}
-    </Flex>
+    </StatsTableWrapper>
   );
 }

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Maneuverability.tsx

@@ -1,4 +1,4 @@
-import { Flex, Heading } from '@radix-ui/themes';
+import { Heading } from '@radix-ui/themes';
 import { useLocale } from '../../../../../../hooks/useLocale';
 import {
   HullTraverseVisualizer,
@@ -6,12 +6,13 @@ import {
 } from './HullTraverseVisualizer';
 import { Info } from './Info';
 import { InfoWithDelta } from './InfoWithDelta';
+import { StatsTableWrapper } from './StatsTableWrapper';
 
 export function Maneuverability({ stats }: StatsAcceptorProps) {
   const { strings } = useLocale();
 
   return (
-    <Flex direction="column" gap="2" width="16rem">
+    <StatsTableWrapper>
       <Heading size="5">
         {strings.website.tools.tankopedia.maneuverability.title}
       </Heading>
@@ -145,6 +146,6 @@ export function Maneuverability({ stats }: StatsAcceptorProps) {
       />
 
       <HullTraverseVisualizer stats={stats} />
-    </Flex>
+    </StatsTableWrapper>
   );
 }

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisualizer.tsx

@@ -46,7 +46,7 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
         top="0"
         left="0"
         style={{
-          background: `linear-gradient(to right, ${Var('gray-a1')}, ${Var('gray-a5')})`,
+          background: `linear-gradient(to right, transparent, ${Var('gray-a4')})`,
         }}
       >
         <Box
@@ -104,12 +104,12 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
           bottom="100%"
           style={{
             transform: 'translateX(-50%)',
-            backgroundColor: Var('gray-a5'),
+            backgroundColor: Var('gray-a8'),
           }}
         />
         <Box
           position="absolute"
-          width="2px"
+          width="3px"
           height="100%"
           style={{
             transform: 'translateX(-50%)',
@@ -127,7 +127,7 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
             height: '2rem',
             top: '6rem',
             left: 0,
-            filter: 'drop-shadow(0px 0px 4px black)',
+            filter: 'drop-shadow(0px 0px 0.25rem black)',
           }}
         />
       </Box>
@@ -144,7 +144,7 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
       >
         <Box
           position="absolute"
-          width="2px"
+          width="3px"
           height="100%"
           top="-100%"
           style={{

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatsTableWrapper.tsx

@@ -0,0 +1,12 @@
+import { Flex, type FlexProps } from '@radix-ui/themes';
+
+export function StatsTableWrapper(props: FlexProps) {
+  return (
+    <Flex
+      direction="column"
+      gap="2"
+      width={{ initial: '16rem', xs: '20rem', md: '16rem', xl: '20rem' }}
+      {...props}
+    />
+  );
+}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Survivability.tsx

@@ -1,15 +1,16 @@
-import { Flex, Heading } from '@radix-ui/themes';
+import { Heading } from '@radix-ui/themes';
 import { useLocale } from '../../../../../../hooks/useLocale';
 import type { StatsAcceptorProps } from './HullTraverseVisualizer';
 import { Info } from './Info';
 import { InfoWithDelta } from './InfoWithDelta';
+import { StatsTableWrapper } from './StatsTableWrapper';
 import { ViewRangeVisualizer } from './ViewRangeVisualizer';
 
 export function Survivability({ stats }: StatsAcceptorProps) {
   const { strings } = useLocale();
 
   return (
-    <Flex direction="column" gap="2" width="16rem">
+    <StatsTableWrapper>
       <Heading size="5">
         {strings.website.tools.tankopedia.survivability.title}
       </Heading>
@@ -110,6 +111,6 @@ export function Survivability({ stats }: StatsAcceptorProps) {
         stats={stats}
         value="volume"
       />
-    </Flex>
+    </StatsTableWrapper>
   );
 }

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx

@@ -83,19 +83,16 @@ export function Characteristics() {
   }, [hasImprovedVerticalStabilizer, hasDownImprovedVerticalStabilizer]);
 
   return (
-    <Flex
-      gap="8"
-      direction={{
-        initial: 'column',
-        lg: 'row',
-      }}
-    >
+    <Flex gap="8" direction={{ initial: 'column', md: 'row' }}>
       <Firepower stats={stats} />
-      <Maneuverability stats={stats} />
 
-      <Flex direction="column" gap="8">
-        <Survivability stats={stats} />
-        <Crew stats={stats} />
+      <Flex gap="8" direction={{ initial: 'column', lg: 'row' }}>
+        <Maneuverability stats={stats} />
+
+        <Flex gap="8" direction="column">
+          <Survivability stats={stats} />
+          <Crew stats={stats} />
+        </Flex>
       </Flex>
     </Flex>
   );

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

@@ -24,7 +24,7 @@ export function CharacteristicsSection() {
           <Flex
             direction="column"
             gap="6"
-            maxWidth="21rem"
+            maxWidth="19rem"
             align={{ initial: 'center', sm: 'start' }}
           >
             <Modules />
@@ -35,13 +35,7 @@ export function CharacteristicsSection() {
             <Miscellaneous />
           </Flex>
 
-          <Flex
-            flexGrow="1"
-            maxWidth={{ initial: '20rem', md: '54rem' }}
-            direction="column"
-            gap="6"
-            width="100%"
-          >
+          <Flex direction="column" gap="6" align="center">
             <CompareOptions display={{ initial: 'flex', sm: 'none' }} />
             <Characteristics />
           </Flex>