From 229f015281815ad1895cbcf74e9373f6b7dbe505 Mon Sep 17 00:00:00 2001
From: PJ <ipriyanshujain@gmail.com>
Date: Wed, 10 Jun 2026 18:50:28 +0530
Subject: [PATCH] web replay fix

---
 replay-ui/src/routes/RunList.tsx | 72 ++++++++++++++++----------------
 replay-ui/src/styles/app.css     |  8 +++-
 2 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/replay-ui/src/routes/RunList.tsx b/replay-ui/src/routes/RunList.tsx
index 57f5670..464eb27 100644
--- a/replay-ui/src/routes/RunList.tsx
+++ b/replay-ui/src/routes/RunList.tsx
@@ -62,41 +62,43 @@ export default function RunList() {
   }
 
   return (
-    <table className="run-table">
-      <thead>
-        <tr>
-          <th>started</th>
-          <th>spec</th>
-          <th>seed</th>
-          <th>platform</th>
-          <th>duration</th>
-          <th>steps</th>
-          <th>violations</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        {runs.map((run) => (
-          <tr key={run.id}>
-            <td>
-              <Link to={`/runs/${run.id}`}>{formatStartedAt(run.started_at)}</Link>
-            </td>
-            <td title={run.spec_path}>{basename(run.spec_path)}</td>
-            <td>{run.seed}</td>
-            <td>{run.platform}</td>
-            <td>{formatDuration(run.duration_millis)}</td>
-            <td>{run.step_count}</td>
-            <td>
-              {run.violation_count > 0 ? (
-                <span className="chip chip-violation">{run.violation_count}</span>
-              ) : (
-                "0"
-              )}
-            </td>
-            <td>{run.in_progress ? <span className="chip chip-progress">in progress</span> : null}</td>
+    <div className="run-list">
+      <table className="run-table">
+        <thead>
+          <tr>
+            <th>started</th>
+            <th>spec</th>
+            <th>seed</th>
+            <th>platform</th>
+            <th>duration</th>
+            <th>steps</th>
+            <th>violations</th>
+            <th></th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {runs.map((run) => (
+            <tr key={run.id}>
+              <td>
+                <Link to={`/runs/${run.id}`}>{formatStartedAt(run.started_at)}</Link>
+              </td>
+              <td title={run.spec_path}>{basename(run.spec_path)}</td>
+              <td>{run.seed}</td>
+              <td>{run.platform}</td>
+              <td>{formatDuration(run.duration_millis)}</td>
+              <td>{run.step_count}</td>
+              <td>
+                {run.violation_count > 0 ? (
+                  <span className="chip chip-violation">{run.violation_count}</span>
+                ) : (
+                  "0"
+                )}
+              </td>
+              <td>{run.in_progress ? <span className="chip chip-progress">in progress</span> : null}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
diff --git a/replay-ui/src/styles/app.css b/replay-ui/src/styles/app.css
index 180e76e..b2f6692 100644
--- a/replay-ui/src/styles/app.css
+++ b/replay-ui/src/styles/app.css
@@ -57,11 +57,15 @@ button:hover {
   min-height: 0;
 }
 
+.run-list {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+}
+
 .run-table {
   width: 100%;
   border-collapse: collapse;
-  align-self: flex-start;
-  flex: 0 0 auto;
 }
 
 .run-table th,