From ffeaba6a182760e9b4c9c6c8e76c958a84855a9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 22 Feb 2024 12:23:56 -0600
Subject: [PATCH] fix: shrink canvas

---
 .../[id]/components/Model/TankSandbox.tsx     | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
index 34d9d3bd4..57f7887a9 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
@@ -172,31 +172,35 @@ export function TankSandbox() {
               </Tabs.List>
             </Tabs.Root>
 
-            <div style={{ height: '100%' }}>
+            <div
+              style={{ height: '100%', position: 'absolute', width: '100%' }}
+            >
               {loadModel ? (
-                <Canvas
-                  shadows
-                  ref={canvas}
-                  onPointerDown={handlePointerDown}
-                  onPointerMissed={() => {
-                    mutateTankopediaTemporary((draft) => {
-                      draft.shot = undefined;
-                    });
-                  }}
-                >
-                  <PerspectiveCamera makeDefault fov={25} far={32} />
-                  <Controls />
-                  <SceneProps />
+                <div style={{ width: '100%', height: '100%' }}>
+                  <Canvas
+                    shadows
+                    ref={canvas}
+                    onPointerDown={handlePointerDown}
+                    onPointerMissed={() => {
+                      mutateTankopediaTemporary((draft) => {
+                        draft.shot = undefined;
+                      });
+                    }}
+                  >
+                    <PerspectiveCamera makeDefault fov={25} far={32} />
+                    <Controls />
+                    <SceneProps />
 
-                  <Suspense fallback={<ModelLoader />}>
-                    <ShotDisplay />
-                    <Lighting />
-                    <TankModel />
-                    <TankArmor />
-                    <ExternalModuleMask ornamental />
-                    <SpacedArmorDepth ornamental />
-                  </Suspense>
-                </Canvas>
+                    <Suspense fallback={<ModelLoader />}>
+                      <ShotDisplay />
+                      <Lighting />
+                      <TankModel />
+                      <TankArmor />
+                      <ExternalModuleMask ornamental />
+                      <SpacedArmorDepth ornamental />
+                    </Suspense>
+                  </Canvas>
+                </div>
               ) : (
                 <Flex
                   align="center"