From ec5e8dc79157d7c1cc021040db7fb5e4631d90b6 Mon Sep 17 00:00:00 2001
From: Leander Furumo <leander@furumo.eu>
Date: Thu, 22 Oct 2026 05:12:17 +0200
Subject: [PATCH] Prevent rotating background from shifting layout

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/components/Wireframe.module.css | 15 ++++++++++++---
 frontend/src/components/Wireframe.tsx        | 10 ++++++----
 frontend/src/global.css                      |  6 ++++++
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Wireframe.module.css b/frontend/src/components/Wireframe.module.css
index fe01263..7edd194 100644
--- a/frontend/src/components/Wireframe.module.css
+++ b/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;
   }
 }
diff --git a/frontend/src/components/Wireframe.tsx b/frontend/src/components/Wireframe.tsx
index fa3c7a8..be9897e 100644
--- a/frontend/src/components/Wireframe.tsx
+++ b/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.wireframe}>
-    {[...Array(64)].map((_, idx) => (
-      <div key={idx} className={styles.cell} />
-    ))}
+  <div className={styles.decoration}>
+    <div className={styles.wireframe}>
+      {[...Array(64)].map((_, idx) => (
+        <div key={idx} className={styles.cell} />
+      ))}
+    </div>
   </div>
 );
diff --git a/frontend/src/global.css b/frontend/src/global.css
index 947362f..b58f825 100644
--- a/frontend/src/global.css
+++ b/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%);