From 158ceca599eec71efc74d555d6b2489379001eba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 27 Jan 2024 18:01:51 -0600
Subject: [PATCH] feat: small screen compatibility

---
 .../[id]/components/Characteristics/index.tsx          |  8 ++------
 src/app/tools/tankopedia/[id]/page.tsx                 | 10 +++++++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
index 53be76097..22a41ecb7 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
@@ -9,7 +9,7 @@ import { Provisions } from './components/Provisions';
 
 export function Characteristics() {
   return (
-    <Tabs.Root defaultValue="configure">
+    <Tabs.Root defaultValue="configure" style={{ width: '100%' }}>
       <Flex gap="4" direction="column">
         <Tabs.List>
           <Tabs.Trigger value="configure">Configure</Tabs.Trigger>
@@ -60,11 +60,7 @@ export function Characteristics() {
               <Info name="Weight" value="45" unit="mt" />
               <Info name="Speed forwards" value="55" unit="km/s" />
               <Info indent name="Backward" value="20" unit="km/s" />
-              <Info
-                name="Effective power on hard terrain"
-                value="36.86"
-                unit="hp/kg"
-              />
+              <Info name="Power on hard terrain" value="36.86" unit="hp/kg" />
               <Info
                 indent
                 name="On medium terrain"
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index 2ff0f1824..1a6bae0f9 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -15,6 +15,7 @@ export default function Page({ params }: { params: { id: string } }) {
   const id = parseInt(params.id);
   const awaitedTankDefinitions = use(tankDefinitions);
   const assigned = useDuel((state) => state.assigned);
+  const wideFormat = typeof window !== 'undefined' && window.innerWidth > 880;
 
   useEffect(() => {
     mutateDuel((draft) => {
@@ -87,7 +88,7 @@ export default function Page({ params }: { params: { id: string } }) {
           <Flex
             style={{ width: '100%' }}
             gap="8"
-            direction="row"
+            direction={wideFormat ? 'row' : 'column'}
             align="start"
             justify="center"
           >
@@ -96,7 +97,8 @@ export default function Page({ params }: { params: { id: string } }) {
               direction="column"
               style={{
                 flex: 1,
-                position: 'sticky',
+                position: wideFormat ? 'sticky' : undefined,
+                width: '100%',
                 top: 64,
               }}
             >
@@ -104,7 +106,9 @@ export default function Page({ params }: { params: { id: string } }) {
               <AntagonistBar />
             </Flex>
 
-            <Characteristics />
+            <Flex style={{ width: wideFormat ? 320 : '100%' }}>
+              <Characteristics />
+            </Flex>
           </Flex>
         </>
       )}