From c1000e1608b3ae145fe0925010297d10c21003ef Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 24 Apr 2025 20:54:24 -0500
Subject: [PATCH] feat: more responsive

---
 .../components/RicochetVisualizer.tsx         |  1 +
 .../components/StatsTableWrapper.tsx          |  3 ++-
 .../components/ViewRangeVisualizer.tsx        | 18 +++++++++-------
 .../components/Characteristics/index.tsx      | 21 ++++++++++++++++---
 .../CharacteristicsSection/index.tsx          |  7 ++++++-
 5 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisualizer.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisualizer.tsx
index cdc91135f..7bd3d32cf 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisualizer.tsx
+++ b/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}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatsTableWrapper.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatsTableWrapper.tsx
index 761637839..731619029 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatsTableWrapper.tsx
+++ b/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}
     />
   );
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ViewRangeVisualizer.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ViewRangeVisualizer.tsx
index 10dd61df0..5e4c331d7 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ViewRangeVisualizer.tsx
+++ b/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%',
           }}
         >
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx
index e1ea6afcf..060b03ef5 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx
+++ b/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>
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/index.tsx
index 95552d5e5..41c72c0af 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/index.tsx
+++ b/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>