feat: better ui sizing

src/app/tools/tankopedia/[id]/components/RotationInputs.tsx

@@ -46,18 +46,24 @@ export function RotationInputs({
 
   return (
     <Flex
-      gap="2"
+      justify="center"
       align="center"
       style={{
+        width: 'calc(100% - 16px)',
         position: 'absolute',
-        left: 16,
+        left: 8,
-        bottom: 16,
+        bottom: 8,
+      }}
+    >
+      <Flex
+        gap="2"
+        style={{
+          width: 352,
         }}
       >
         <TextField.Root
-        variant="surface"
           style={{
-          width: 115,
+            flex: 1,
           }}
         >
           <TextField.Slot>Hull</TextField.Slot>
@@ -85,9 +91,8 @@ export function RotationInputs({
         </TextField.Root>
 
         <TextField.Root
-        variant="surface"
           style={{
-          width: 115,
+            flex: 1,
           }}
         >
           <TextField.Slot>Turret</TextField.Slot>
@@ -121,9 +126,8 @@ export function RotationInputs({
         </TextField.Root>
 
         <TextField.Root
-        variant="surface"
           style={{
-          width: 115,
+            flex: 1,
           }}
         >
           <TextField.Slot>Gun</TextField.Slot>
@@ -156,5 +160,6 @@ export function RotationInputs({
           <TextField.Slot>°</TextField.Slot>
         </TextField.Root>
       </Flex>
+    </Flex>
   );
 }

src/app/tools/tankopedia/[id]/page.tsx

@@ -3,6 +3,8 @@
 import {
   ArrowLeftIcon,
   CaretRightIcon,
+  EnterFullScreenIcon,
+  ExitFullScreenIcon,
   MagnifyingGlassIcon,
 } from '@radix-ui/react-icons';
 import {
@@ -24,7 +26,7 @@ import { Canvas } from '@react-three/fiber';
 import { go } from 'fuzzysort';
 import { debounce } from 'lodash';
 import Link from 'next/link';
-import { Suspense, use, useRef, useState } from 'react';
+import { Suspense, use, useEffect, useRef, useState } from 'react';
 import { Group, Vector3 } from 'three';
 import { Flag } from '../../../../components/Flag';
 import { ModuleButtons } from '../../../../components/ModuleButton';
@@ -37,7 +39,6 @@ import {
 } from '../../../../core/blitzkrieg/tankDefinitions';
 import { theme } from '../../../../stitches.config';
 import { Loader } from '../../components/Loader';
-import * as styles from '../page.css';
 import { Controls } from './components/Control';
 import { RotationInputs } from './components/RotationInputs';
 import { SceneProps } from './components/SceneProps';
@@ -64,6 +65,8 @@ export default function Page({ params }: { params: { id: string } }) {
   const [versusGun, setVersusGun] = useState(versusTurret.guns.at(-1)!);
   const [versusTankTab, setVersusTankTab] = useState('search');
   const canvas = useRef<HTMLCanvasElement>(null);
+  const canvasWrapper = useRef<HTMLDivElement>(null);
+  const [isFullScreen, setIsFullScreen] = useState(false);
 
   function handlePointerDown() {
     window.addEventListener('pointermove', handlePointerMove);
@@ -79,6 +82,18 @@ export default function Page({ params }: { params: { id: string } }) {
     window.removeEventListener('pointerup', handlePointerUp);
   }
 
+  useEffect(() => {
+    function handleFullScreenChange() {
+      setIsFullScreen(document.fullscreenElement !== null);
+    }
+
+    document.addEventListener('fullscreenchange', handleFullScreenChange);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullScreenChange);
+    };
+  });
+
   return (
     <PageWrapper color="purple">
       <Flex gap="8" direction="column">
@@ -90,7 +105,7 @@ export default function Page({ params }: { params: { id: string } }) {
             >
               <Flex gap="1" align="center">
                 <ArrowLeftIcon />
-                <Text>Back to tankopedia</Text>
+                <Text>Back</Text>
               </Flex>
             </Link>
 
@@ -100,8 +115,23 @@ export default function Page({ params }: { params: { id: string } }) {
             </Flex>
           </Flex>
 
-          <Card style={{ position: 'relative' }}>
+          <Theme radius={isFullScreen ? 'none' : undefined}>
-            <Flex direction="column" gap="2">
+            <Card
+              style={{
+                position: 'relative',
+                border: isFullScreen ? 'none' : 'unset',
+              }}
+              ref={canvasWrapper}
+            >
+              <Theme radius="full" style={{ height: '100%' }}>
+                <Flex
+                  style={{
+                    height: isFullScreen ? '100%' : '75vh',
+                    maxHeight: isFullScreen ? 'unset' : 576,
+                  }}
+                  direction="column"
+                  gap="2"
+                >
                   <Tabs.Root value={mode} onValueChange={setMode}>
                     <Tabs.List>
                       <Tabs.Trigger value="model">Model</Tabs.Trigger>
@@ -109,7 +139,7 @@ export default function Page({ params }: { params: { id: string } }) {
                     </Tabs.List>
                   </Tabs.Root>
 
-              <div style={{ height: '50vh', maxHeight: 576 }}>
+                  <div style={{ height: '100%' }}>
                     <Canvas
                       shadows
                       ref={canvas}
@@ -139,12 +169,27 @@ export default function Page({ params }: { params: { id: string } }) {
                     </Canvas>
                   </div>
 
-              {mode === 'armor' && (
+                  <Button
-                <Flex gap="2" align="center" className={styles.enhancedArmor}>
+                    variant="ghost"
-                  <Checkbox defaultChecked />
+                    style={{
-                  <Text>Enhanced armor</Text>
+                      position: 'absolute',
-                </Flex>
+                      top: 18,
+                      right: 18,
+                    }}
+                    onClick={() => {
+                      if (isFullScreen) {
+                        document.exitFullscreen();
+                      } else {
+                        canvasWrapper.current?.requestFullscreen();
+                      }
+                    }}
+                  >
+                    {isFullScreen ? (
+                      <ExitFullScreenIcon />
+                    ) : (
+                      <EnterFullScreenIcon />
                     )}
+                  </Button>
 
                   <RotationInputs
                     gunId={gun.id}
@@ -152,7 +197,9 @@ export default function Page({ params }: { params: { id: string } }) {
                     turretId={turret.id}
                   />
                 </Flex>
+              </Theme>
             </Card>
+          </Theme>
 
           <Theme radius="small">
             <Flex gap="4">

src/app/tools/tankopedia/page.css.ts

@@ -41,7 +41,7 @@ export const listingImage = style({
   },
 });
 
-export const enhancedArmor = style({
+export const alignTopRight = style({
   '@media': {
     'screen and (min-width: 400px)': {
       position: 'absolute',

src/app/tools/tankopedia/page.tsx

@@ -16,6 +16,7 @@ import {
   TextField,
 } from '@radix-ui/themes';
 import { go } from 'fuzzysort';
+import Link from 'next/link';
 import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
 import { asset } from '../../../core/blitzkrieg/asset';
@@ -198,7 +199,7 @@ export default function Page() {
         <Flex wrap="wrap" gap="3" justify="center">
           {searchedList
             .map((tank) => (
-              <a
+              <Link
                 key={tank.id}
                 href={`/tools/tankopedia/${tank.id}`}
                 style={{
@@ -309,7 +310,7 @@ export default function Page() {
                     </Flex>
                   </Inset>
                 </Card>
-              </a>
+              </Link>
             ))
             .slice(page * TANKS_PER_PAGE, (page + 1) * TANKS_PER_PAGE)}
         </Flex>