quarter width grid

src/routes/+page.svelte

@@ -48,26 +48,20 @@
         </div>
     {/if}
 
-    <div class="content">
-        {#if currentView === "Leaderboard"}
-            <Leaderboard onEntryClick={showModelDetails} />
-        {:else if currentView === "Vote"}
-            <Vote />
-        {:else if currentView === "ModelDetails" && selectedEntry}
-            <ModelDetails
-                modelName={selectedEntry.name}
-                modelPath={selectedEntry.path}
-                onBack={() => (currentView = "Leaderboard")}
-                onSceneClick={showScene}
-            />
-        {:else if currentView === "Viewer" && selectedScene && selectedEntry}
-            <Viewer
-                modelName={selectedEntry.name}
-                scene={selectedScene}
-                onBack={() => (currentView = "ModelDetails")}
-            />
-        {:else if currentView === "About"}
-            <About />
-        {/if}
-    </div>
+    {#if currentView === "Leaderboard"}
+        <Leaderboard onEntryClick={showModelDetails} />
+    {:else if currentView === "Vote"}
+        <Vote />
+    {:else if currentView === "ModelDetails" && selectedEntry}
+        <ModelDetails
+            modelName={selectedEntry.name}
+            modelPath={selectedEntry.path}
+            onBack={() => (currentView = "Leaderboard")}
+            onSceneClick={showScene}
+        />
+    {:else if currentView === "Viewer" && selectedScene && selectedEntry}
+        <Viewer modelName={selectedEntry.name} scene={selectedScene} onBack={() => (currentView = "ModelDetails")} />
+    {:else if currentView === "About"}
+        <About />
+    {/if}
 </div>

src/routes/Vote.svelte

@@ -69,7 +69,6 @@
     }
 
     async function loadScenes() {
-        const scrollPosition = window.scrollY;
         const success = await fetchScenes();
         if (!success) return;
 
@@ -98,7 +97,6 @@
 
         overlayA.style.display = "none";
         overlayB.style.display = "none";
-        window.scrollTo(0, scrollPosition);
     }
 
     async function vote(option: "A" | "B") {

static/global.css

@@ -76,22 +76,23 @@ body {
     margin-left: auto;
     margin-right: auto;
     padding: 10px;
+    min-height: 1200px;
     position: relative;
     box-sizing: border-box;
 
-    @media (min-width: 576px) {
+    @media (min-width: 576px) and (min-height: 720px) {
         max-width: 320px;
     }
 
-    @media (min-width: 768px) {
+    @media (min-width: 768px) and (min-height: 860px) {
         max-width: 480px;
     }
 
-    @media (min-width: 992px) {
+    @media (min-width: 992px) and (min-height: 880px) {
         max-width: 600px;
     }
 
-    @media (min-width: 1200px) {
+    @media (min-width: 1200px) and (min-height: 960px) {
         max-width: 800px;
     }
 }
@@ -222,6 +223,10 @@ body {
     @media (min-width: 992px) {
         width: calc(33.333% - 10px);
     }
+
+    @media (min-width: 1200px) {
+        width: calc(25% - 10px);
+    }
 }
 
 .grid-item::before {