scroll overflow

src/routes/+page.svelte

@@ -48,20 +48,26 @@
         </div>
     {/if}
 
-    {#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 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>
 </div>

src/routes/About.svelte

@@ -1,54 +1,53 @@
-<div class="about">
-    <div class="section" style="padding: 10px 0;">
-        <p class="muted">
-            The <span class="emphasis">IGF</span> (In-Game Footage) leaderboard evaluates leading generative 3D models.
-            It is inspired by
-            <a class="emphasis" target="_blank" href="https://huggingface.co/spaces/TTS-AGI/TTS-Arena">TTS-Arena</a>
-            and
-            <a class="emphasis" target="_blank" href="https://chat.lmsys.org/">Chatbot Arena</a>.
-        </p>
-    </div>
-    <div class="section">
-        <h3 class="emphasis">Motivation</h3>
-        <p class="muted">
-            Evaluating generated 3D quality quantitatively is challenging, and there is no standard practice for
-            reporting critical factors like mesh topology in real-world applications.
-        </p>
-        <p class="muted">This leaderboard displays usable, final results side-by-side for the community to rank.</p>
-    </div>
-    <div class="section">
-        <h3 class="emphasis">Criteria</h3>
-        <p class="muted">
-            Models must handle <span class="emphasis">image</span> (.png, .jpg) inputs and produce
-            <span class="emphasis">mesh</span>
-            (.obj, .glb) or <span class="emphasis">splat</span> (.splat, .ply) outputs. They should run end-to-end without
-            human intervention, including UV unwrapping, texture mapping, and other post-processing.
-        </p>
-        <p class="muted">
-            To preview how your results will look in the leaderboard, upload them to any <a
-                class="emphasis"
-                target="_blank"
-                href="https://huggingface.co/spaces/gradio/model3D">gradio/model3d</a
-            > viewer.
-        </p>
-    </div>
-    <div class="section">
-        <h3 class="emphasis">Contributing</h3>
-        <p class="muted">
-            All inputs and outputs are publicly available <a
-                class="emphasis"
-                target="_blank"
-                href="https://huggingface.co/datasets/dylanebert/3d-arena">here</a
-            >.
-        </p>
-        <p class="muted">
-            To contribute a model, run your model on all input images and create a pull request with your model's
-            output. Refer to other examples in the dataset to understand the expected format.
-        </p>
-    </div>
-    <div class="section">
-        <h3 class="emphasis">Citing</h3>
-        <pre>
+<div class="section" style="padding: 10px 0;">
+    <p class="muted">
+        The <span class="emphasis">IGF</span> (In-Game Footage) leaderboard evaluates leading generative 3D models. It
+        is inspired by
+        <a class="emphasis" target="_blank" href="https://huggingface.co/spaces/TTS-AGI/TTS-Arena">TTS-Arena</a>
+        and
+        <a class="emphasis" target="_blank" href="https://chat.lmsys.org/">Chatbot Arena</a>.
+    </p>
+</div>
+<div class="section">
+    <h3 class="emphasis">Motivation</h3>
+    <p class="muted">
+        Evaluating generated 3D quality quantitatively is challenging, and there is no standard practice for reporting
+        critical factors like mesh topology in real-world applications.
+    </p>
+    <p class="muted">This leaderboard displays usable, final results side-by-side for the community to rank.</p>
+</div>
+<div class="section">
+    <h3 class="emphasis">Criteria</h3>
+    <p class="muted">
+        Models must handle <span class="emphasis">image</span> (.png, .jpg) inputs and produce
+        <span class="emphasis">mesh</span>
+        (.obj, .glb) or <span class="emphasis">splat</span> (.splat, .ply) outputs. They should run end-to-end without human
+        intervention, including UV unwrapping, texture mapping, and other post-processing.
+    </p>
+    <p class="muted">
+        To preview how your results will look in the leaderboard, upload them to any <a
+            class="emphasis"
+            target="_blank"
+            href="https://huggingface.co/spaces/gradio/model3D">gradio/model3d</a
+        > viewer.
+    </p>
+</div>
+<div class="section">
+    <h3 class="emphasis">Contributing</h3>
+    <p class="muted">
+        All inputs and outputs are publicly available <a
+            class="emphasis"
+            target="_blank"
+            href="https://huggingface.co/datasets/dylanebert/3d-arena">here</a
+        >.
+    </p>
+    <p class="muted">
+        To contribute a model, run your model on all input images and create a pull request with your model's output.
+        Refer to other examples in the dataset to understand the expected format.
+    </p>
+</div>
+<div class="section">
+    <h3 class="emphasis">Citing</h3>
+    <pre>
             <code>
                 @misc&lbrace;igf-leaderboard,
                     author = &lbrace;Dylan Ebert&rbrace;
@@ -59,5 +58,4 @@
                 &rbrace;
             </code>
         </pre>
-    </div>
 </div>

static/global.css

@@ -41,11 +41,6 @@ body {
     font-weight: bold;
 }
 
-.about {
-    overflow: auto;
-    max-height: 100%;
-}
-
 .loading-container {
     display: flex;
     flex-direction: column;
@@ -103,6 +98,11 @@ body {
     }
 }
 
+.content {
+    max-height: 100%;
+    overflow: auto;
+}
+
 .canvas-container {
     position: relative;
     width: 100%;