feat: fullscreen hydration

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -104,24 +104,13 @@ export function HeroSection() {
             background: isFullScreen ? 'var(--color-background)' : undefined,
           }}
         >
-          <div
-            style={{
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-            }}
-          >
-            <div
-              style={{
-                width: '100%',
-                height: '100%',
-              }}
-            >
+          <Box width="100%" height="100%" position="absolute">
+            <Box width="100%" height="100%">
               <TankSandbox />
-            </div>
+            </Box>
 
             <Options />
-          </div>
+          </Box>
         </Box>
       </Flex>
     </Flex>

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -31,6 +31,7 @@ import {
 } from '../../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useEquipment } from '../../../../../../../hooks/useEquipment';
 import { useFullScreen } from '../../../../../../../hooks/useFullScreen';
+import { useFullscreenAvailability } from '../../../../../../../hooks/useFullscreenAvailability';
 import * as App from '../../../../../../../stores/app';
 import * as Duel from '../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
@@ -60,8 +61,7 @@ export function Options() {
     (state) => state.model.visual.showSpacedArmor,
   );
   const opaque = TankopediaPersistent.use((state) => state.model.visual.opaque);
-  const fullScreenAvailable =
-    typeof document !== 'undefined' && document.fullscreenEnabled;
+  const fullScreenAvailable = useFullscreenAvailability();
   const environment = TankopediaPersistent.use(
     (state) => state.model.visual.environment,
   );
@@ -533,7 +533,6 @@ export function Options() {
                   });
                 }}
               >
-                {/* TODO: consider removing this? */}
                 View environment
               </DropdownMenu.CheckboxItem>
 

src/hooks/useFullscreenAvailability.ts

@@ -0,0 +1,11 @@
+import { useLayoutEffect, useState } from 'react';
+
+export function useFullscreenAvailability() {
+  const [available, setAvailable] = useState(false);
+
+  useLayoutEffect(() => {
+    setAvailable(document.fullscreenEnabled);
+  }, []);
+
+  return available;
+}