From bce752304a152616f9cd333b6c339ebe0753206f Mon Sep 17 00:00:00 2001
From: Gordon Murray <gordon@gordonmurray.com>
Date: Sat, 27 Sep 2025 08:49:22 +0100
Subject: [PATCH 1/2] feat: Add horizontal scrolling for tables with many
 columns

---
 web/styles.css | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/styles.css b/web/styles.css
index cb4fd30..6dd24fe 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -122,7 +122,6 @@ header h1 {
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    overflow: hidden;
 }
 
 .dataset-header {
@@ -226,14 +225,17 @@ header h1 {
 }
 
 .table-container {
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: auto;
     max-height: 70vh;
     border: 1px solid #dee2e6;
     border-radius: 6px;
+    position: relative;
 }
 
 table {
-    width: 100%;
+    min-width: 100%;
+    width: max-content;
     border-collapse: collapse;
     font-size: 0.9rem;
 }
@@ -248,12 +250,15 @@ table th {
     position: sticky;
     top: 0;
     z-index: 10;
+    min-width: 100px;
+    white-space: nowrap;
 }
 
 table td {
     padding: 10px 8px;
     border-bottom: 1px solid #f1f3f4;
     vertical-align: top;
+    min-width: 100px;
 }
 
 table tr:hover {

From 844c00449aa57fe8afe57cb6363ea75787afae8f Mon Sep 17 00:00:00 2001
From: Gordon Murray <gordon@gordonmurray.com>
Date: Sat, 27 Sep 2025 08:58:21 +0100
Subject: [PATCH 2/2] fix: Contain table overflow to prevent page-wide
 scrolling

Tables with many columns now scroll horizontally within their container only
---
 web/styles.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/styles.css b/web/styles.css
index 6dd24fe..9cf5d0b 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -122,6 +122,9 @@ header h1 {
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
 .dataset-header {
@@ -130,6 +133,13 @@ header h1 {
     border-bottom: 1px solid #dee2e6;
 }
 
+.data-section {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
 .header-row {
     display: flex;
     justify-content: space-between;