Prevent rotating background from shifting layout

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/components/Wireframe.module.css

@@ -1,6 +1,16 @@
-.wireframe {
+.decoration {
   position: absolute;
   z-index: -1;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 100vh;
+  overflow: clip;
+  pointer-events: none;
+}
+
+.wireframe {
+  position: absolute;
   bottom: calc(22% - 512px);
   left: calc(50% - 512px);
   display: grid;
@@ -11,7 +21,6 @@
   animation-name: isometric-rotate;
   animation-timing-function: linear;
   grid-template-columns: repeat(8, 128px);
-  pointer-events: none;
 }
 
 .cell {
@@ -28,7 +37,7 @@
 }
 
 @media (max-width: 640px) {
-  .wireframe {
+  .decoration {
     display: none;
   }
 }

frontend/src/components/Wireframe.tsx

@@ -3,9 +3,11 @@ import React from "react";
 import styles from "./Wireframe.module.css";
 
 export const Wireframe = () => (
+  <div className={styles.decoration}>
     <div className={styles.wireframe}>
       {[...Array(64)].map((_, idx) => (
         <div key={idx} className={styles.cell} />
       ))}
     </div>
+  </div>
 );

frontend/src/global.css

@@ -32,6 +32,12 @@ html {
   box-sizing: inherit;
 }
 
+@media (min-width: 641px) {
+  html {
+    scrollbar-gutter: stable;
+  }
+}
+
 /* Body and interitable styles */
 body {
   background: linear-gradient(rgba(0, 0, 0, 0.8) 60%, var(--background) 100%);