Update index.html to use fixed positioning and flexbox for viewer element

2025-05-28 04:24:03 +02:00
parent aa8217cbf1
commit 46f100c268
1 changed files with 30 additions and 8 deletions
--- 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>