feat: more responsive

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

@@ -25,6 +25,7 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
       variant="classic"
       style={{
         aspectRatio: '1 / 1',
+        touchAction: 'none',
       }}
       mb="6"
       ref={container}

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

@@ -5,7 +5,8 @@ export function StatsTableWrapper(props: FlexProps) {
     <Flex
       direction="column"
       gap="2"
-      width={{ initial: '16rem', xs: '20rem', md: '16rem', xl: '20rem' }}
+      maxWidth="25rem"
+      width={{ initial: '100%', md: '16rem', xl: '20rem' }}
       {...props}
     />
   );

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

@@ -31,7 +31,11 @@ export function ViewRangeVisualizer({ stats }: StatsAcceptorProps) {
   const range = useRef<HTMLDivElement>(null);
 
   return (
-    <Card style={{ aspectRatio: '1 / 1' }} mb="6" variant="classic">
+    <Card
+      style={{ aspectRatio: '1 / 1', touchAction: 'none' }}
+      mb="6"
+      variant="classic"
+    >
       <Box
         ref={container}
         onPointerMove={(event) => {
@@ -47,11 +51,6 @@ export function ViewRangeVisualizer({ stats }: StatsAcceptorProps) {
         left="0"
         width="100%"
         height="100%"
-        style={{
-          backgroundImage: `url(/assets/images/tankopedia/visualizers/range/${map.id}.png)`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
       >
         <Box
           position="absolute"
@@ -60,7 +59,10 @@ export function ViewRangeVisualizer({ stats }: StatsAcceptorProps) {
           width="100%"
           height="100%"
           style={{
-            background: Var('black-a5'),
+            backgroundImage: `url(/assets/images/tankopedia/visualizers/range/${map.id}.png)`,
+            filter: `grayscale(0.5) brightness(0.8) contrast(1.2)`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
           }}
         />
 
@@ -75,7 +77,7 @@ export function ViewRangeVisualizer({ stats }: StatsAcceptorProps) {
           style={{
             aspectRatio: '1 / 1',
             transform: 'translate(-50%, -50%)',
-            background: `radial-gradient(${Var('gray-a1')}, ${Var('gray-a12')})`,
+            background: `radial-gradient(${Var('black-a6')}, ${Var('gray-a12')})`,
             borderRadius: '50%',
           }}
         >

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

@@ -83,13 +83,28 @@ export function Characteristics() {
   }, [hasImprovedVerticalStabilizer, hasDownImprovedVerticalStabilizer]);
 
   return (
-    <Flex gap="8" direction={{ initial: 'column', md: 'row' }}>
+    <Flex
+      gap="8"
+      direction={{ initial: 'column', md: 'row' }}
+      align={{ initial: 'center', sm: 'start' }}
+      width={{ initial: '100%', sm: 'auto' }}
+    >
       <Firepower stats={stats} />
 
-      <Flex gap="8" direction={{ initial: 'column', lg: 'row' }}>
+      <Flex
+        gap="8"
+        direction={{ initial: 'column', lg: 'row' }}
+        align={{ initial: 'center', sm: 'start' }}
+        width={{ initial: '100%', sm: 'auto' }}
+      >
         <Maneuverability stats={stats} />
 
-        <Flex gap="8" direction="column">
+        <Flex
+          gap="8"
+          direction="column"
+          align={{ initial: 'center', sm: 'start' }}
+          width={{ initial: '100%', sm: 'auto' }}
+        >
           <Survivability stats={stats} />
           <Crew stats={stats} />
         </Flex>

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

@@ -35,7 +35,12 @@ export function CharacteristicsSection() {
             <Miscellaneous />
           </Flex>
 
-          <Flex direction="column" gap="6" align="center">
+          <Flex
+            direction="column"
+            gap="6"
+            align={{ initial: 'stretch', sm: 'center' }}
+            width={{ initial: '100%', sm: 'auto' }}
+          >
             <CompareOptions display={{ initial: 'flex', sm: 'none' }} />
             <Characteristics />
           </Flex>