From 169092c8eaeedb1a2efc64c12280a58cf3e90631 Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Sun, 1 Mar 2026 13:16:58 +0100
Subject: [PATCH] fix(admin): make pipeline data view responsive on mobile

- Tab bar: add overflow-x:auto so 5 tabs scroll on narrow screens
- Overview grid: replace hardcoded 1fr 1fr with .pipeline-two-col (stacks below 640px)
- Overview tables: wrap Serving Tables + Landing Zone in overflow-x:auto divs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../templates/admin/partials/pipeline_overview.html    |  6 +++++-
 .../padelnomics/admin/templates/admin/pipeline.html    | 10 ++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/web/src/padelnomics/admin/templates/admin/partials/pipeline_overview.html b/web/src/padelnomics/admin/templates/admin/partials/pipeline_overview.html
index 6eafb79..c1668c4 100644
--- a/web/src/padelnomics/admin/templates/admin/partials/pipeline_overview.html
+++ b/web/src/padelnomics/admin/templates/admin/partials/pipeline_overview.html
@@ -57,7 +57,7 @@
 </div>
 
 <!-- Two-column row: Serving Freshness + Landing Zone -->
-<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
+<div class="pipeline-two-col">
 
   <!-- Serving Freshness -->
   <div class="card">
@@ -68,6 +68,7 @@
     </p>
     {% endif %}
     {% if serving_tables %}
+    <div style="overflow-x:auto">
     <table class="table" style="font-size:0.8125rem">
       <thead>
         <tr>
@@ -86,6 +87,7 @@
         {% endfor %}
       </tbody>
     </table>
+    </div>
     {% else %}
     <p class="text-sm text-slate">No serving tables found — run the pipeline first.</p>
     {% endif %}
@@ -99,6 +101,7 @@
       </span>
     </p>
     {% if landing_stats %}
+    <div style="overflow-x:auto">
     <table class="table" style="font-size:0.8125rem">
       <thead>
         <tr>
@@ -119,6 +122,7 @@
         {% endfor %}
       </tbody>
     </table>
+    </div>
     {% else %}
     <p class="text-sm text-slate">
       Landing zone empty or not found at <code>data/landing</code>.
diff --git a/web/src/padelnomics/admin/templates/admin/pipeline.html b/web/src/padelnomics/admin/templates/admin/pipeline.html
index 8f0124a..19df2c0 100644
--- a/web/src/padelnomics/admin/templates/admin/pipeline.html
+++ b/web/src/padelnomics/admin/templates/admin/pipeline.html
@@ -15,6 +15,7 @@
 
   .pipeline-tabs {
     display: flex; gap: 0; border-bottom: 2px solid #E2E8F0; margin-bottom: 1.5rem;
+    overflow-x: auto; -webkit-overflow-scrolling: touch;
   }
   .pipeline-tabs button {
     padding: 0.625rem 1.25rem; font-size: 0.8125rem; font-weight: 600;
@@ -33,6 +34,15 @@
   .status-dot.stale   { background: #D97706; }
   .status-dot.running { background: #3B82F6; }
   .status-dot.pending { background: #CBD5E1; }
+
+  .pipeline-two-col {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  @media (min-width: 640px) {
+    .pipeline-two-col { grid-template-columns: 1fr 1fr; }
+  }
 </style>
 {% endblock %}