From 46f100c268f737dfcfb3c5849dbc36640ee8202d Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 28 May 2025 04:24:03 +0200
Subject: [PATCH] Update index.html to use fixed positioning and flexbox for
 viewer element

---
 node/server/public/index.html | 38 +++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)
diff --git a/node/server/public/index.html b/node/server/public/index.html
index aa16bd3..df5a191 100644
--- a/node/server/public/index.html
+++ b/node/server/public/index.html
@@ -13,15 +13,37 @@
   }
   </script>
   <style>
-    #viewer {
-      position: absolute; top:50%; left:50%;
-      transform: translate(-50%,-50%);
-      width:1200px; height:800px;
-      max-width:100%; max-height:100%;
-      background:#000; border-radius:15px; overflow:hidden;
+    html, body {
+      width: 100vw;
+      height: 100vh;
+      margin: 0; padding: 0;
+      overflow: hidden;
+      background: #000;
+    }
+    #viewer {
+      position: fixed; /* fills window, always on top */
+      inset: 0;
+      width: 100vw;
+      height: 100vh;
+      background: #000;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 1;
+    }
+    canvas {
+      display: block;
+      width: 100vw;  /* so that Three.js resizing works right */
+      height: 100vh;
+      max-width: none;
+      max-height: none;
+      pointer-events: auto;
+    }
+    /* Optional: Overlay z-index */
+    #spirit-info {
+      z-index: 10;
     }
-    canvas { display:block; }
-    body { margin:0; overflow:hidden; background:#000; }
   </style>
 </head>
 <body>
