feat: small screen compatibility

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"

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>
         </>
       )}