From c9dec066f712e1baed0a3b538d40056552bcb87b Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Sun, 1 Mar 2026 11:20:46 +0100
Subject: [PATCH] =?UTF-8?q?fix(admin):=20mobile=20UX=20fixes=20=E2=80=94?=
 =?UTF-8?q?=20contrast,=20scroll,=20responsive=20grids?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS: `.nav-mobile a` → `.nav-mobile a:not(.nav-auth-btn)` to fix Sign
  Out button showing slate text instead of white on mobile
- base_admin.html: add `overflow-y: hidden` + `scrollbar-width: none` to
  `.admin-subnav` to eliminate ghost 1px scrollbar on Content tab row
- routes.py: pass `outreach_email=EMAIL_ADDRESSES["outreach"]` to outreach
  template so sending domain is no longer hardcoded
- outreach.html: display dynamic `outreach_email`; replace inline
  `repeat(6,1fr)` grid with responsive `.pipeline-status-grid` (2→3→6 cols)
- index.html: replace inline `repeat(5,1fr)` Lead/Supplier Funnel grids
  with responsive `.funnel-grid` class (2 cols mobile, 5 cols md+)
- pipeline.html: replace inline `repeat(4,1fr)` stat grid with responsive
  `.pipeline-stat-grid` (2 cols mobile, 4 cols md+)
- 4 partials (lead/email/supplier/outreach results): wrap `<table>` in
  `<div style="overflow-x:auto">` so tables scroll on narrow screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/padelnomics/admin/routes.py           |  1 +
 .../admin/templates/admin/base_admin.html     |  4 +++-
 .../admin/templates/admin/index.html          | 17 +++++++++++++--
 .../admin/templates/admin/outreach.html       | 21 +++++++++++++++++--
 .../admin/partials/email_results.html         |  2 ++
 .../admin/partials/lead_results.html          |  2 ++
 .../admin/partials/outreach_results.html      |  2 ++
 .../admin/partials/supplier_results.html      |  2 ++
 .../admin/templates/admin/pipeline.html       | 11 +++++++++-
 web/src/padelnomics/static/css/input.css      | 11 +++++-----
 10 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/web/src/padelnomics/admin/routes.py b/web/src/padelnomics/admin/routes.py
index 4031c69..59335be 100644
--- a/web/src/padelnomics/admin/routes.py
+++ b/web/src/padelnomics/admin/routes.py
@@ -3037,6 +3037,7 @@ async def outreach():
         current_search=search,
         current_follow_up=follow_up,
         page=page,
+        outreach_email=EMAIL_ADDRESSES["outreach"],
     )
 
 
diff --git a/web/src/padelnomics/admin/templates/admin/base_admin.html b/web/src/padelnomics/admin/templates/admin/base_admin.html
index 8f8189c..28323f6 100644
--- a/web/src/padelnomics/admin/templates/admin/base_admin.html
+++ b/web/src/padelnomics/admin/templates/admin/base_admin.html
@@ -40,8 +40,10 @@
   .admin-subnav {
     display: flex; align-items: stretch; padding: 0 2rem;
     background: #fff; border-bottom: 1px solid #E2E8F0;
-    flex-shrink: 0; overflow-x: auto; gap: 0;
+    flex-shrink: 0; overflow-x: auto; overflow-y: hidden; gap: 0;
+    scrollbar-width: none;
   }
+  .admin-subnav::-webkit-scrollbar { display: none; }
   .admin-subnav a {
     display: flex; align-items: center; gap: 5px;
     padding: 0 1px; margin: 0 13px 0 0; height: 42px;
diff --git a/web/src/padelnomics/admin/templates/admin/index.html b/web/src/padelnomics/admin/templates/admin/index.html
index 8cd184c..d0d5db3 100644
--- a/web/src/padelnomics/admin/templates/admin/index.html
+++ b/web/src/padelnomics/admin/templates/admin/index.html
@@ -3,6 +3,19 @@
 
 {% block title %}Admin Dashboard - {{ config.APP_NAME }}{% endblock %}
 
+{% block admin_head %}
+<style>
+  .funnel-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+  @media (min-width: 768px) {
+    .funnel-grid { grid-template-columns: repeat(5, 1fr); }
+  }
+</style>
+{% endblock %}
+
 {% block admin_content %}
   <header class="flex justify-between items-center mb-8">
     <div>
@@ -47,7 +60,7 @@
 
   <!-- Lead Funnel -->
   <p class="text-xs font-semibold text-slate uppercase tracking-wider mb-2">Lead Funnel</p>
-  <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:0.75rem" class="mb-8">
+  <div class="funnel-grid mb-8">
     <div class="card text-center border-l-4 border-l-electric" style="padding:0.75rem">
       <p class="text-xs text-slate">Planner Users</p>
       <p class="text-xl font-bold text-navy">{{ stats.planner_users }}</p>
@@ -72,7 +85,7 @@
 
   <!-- Supplier Stats -->
   <p class="text-xs font-semibold text-slate uppercase tracking-wider mb-2">Supplier Funnel</p>
-  <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:0.75rem" class="mb-8">
+  <div class="funnel-grid mb-8">
     <div class="card text-center border-l-4 border-l-accent" style="padding:0.75rem">
       <p class="text-xs text-slate">Claimed Suppliers</p>
       <p class="text-xl font-bold text-navy">{{ stats.suppliers_claimed }}</p>
diff --git a/web/src/padelnomics/admin/templates/admin/outreach.html b/web/src/padelnomics/admin/templates/admin/outreach.html
index aabc6a5..faa86be 100644
--- a/web/src/padelnomics/admin/templates/admin/outreach.html
+++ b/web/src/padelnomics/admin/templates/admin/outreach.html
@@ -2,13 +2,30 @@
 {% set admin_page = "outreach" %}
 {% block title %}Outreach Pipeline - Admin - {{ config.APP_NAME }}{% endblock %}
 
+{% block admin_head %}
+<style>
+  .pipeline-status-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+  @media (min-width: 640px) {
+    .pipeline-status-grid { grid-template-columns: repeat(3, 1fr); }
+  }
+  @media (min-width: 1024px) {
+    .pipeline-status-grid { grid-template-columns: repeat(6, 1fr); }
+  }
+</style>
+{% endblock %}
+
 {% block admin_content %}
   <header class="flex justify-between items-center mb-6">
     <div>
       <h1 class="text-2xl">Outreach</h1>
       <p class="text-sm text-slate mt-1">
         {{ pipeline.total }} supplier{{ 's' if pipeline.total != 1 else '' }} in pipeline
-        &middot; Sending domain: <span class="mono text-xs">hello.padelnomics.io</span>
+        &middot; Sending from: <span class="mono text-xs">{{ outreach_email }}</span>
       </p>
     </div>
     <div class="flex gap-2">
@@ -18,7 +35,7 @@
   </header>
 
   <!-- Pipeline cards -->
-  <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:0.75rem;margin-bottom:1.5rem">
+  <div class="pipeline-status-grid">
     {% set status_colors = {
       'prospect':       '#E2E8F0',
       'contacted':      '#DBEAFE',
diff --git a/web/src/padelnomics/admin/templates/admin/partials/email_results.html b/web/src/padelnomics/admin/templates/admin/partials/email_results.html
index 2945ff8..d064852 100644
--- a/web/src/padelnomics/admin/templates/admin/partials/email_results.html
+++ b/web/src/padelnomics/admin/templates/admin/partials/email_results.html
@@ -1,5 +1,6 @@
 {% if emails %}
 <div class="card">
+  <div style="overflow-x:auto">
   <table class="table">
     <thead>
       <tr>
@@ -38,6 +39,7 @@
       {% endfor %}
     </tbody>
   </table>
+  </div>
 </div>
 {% else %}
 <div class="card text-center" style="padding:2rem">
diff --git a/web/src/padelnomics/admin/templates/admin/partials/lead_results.html b/web/src/padelnomics/admin/templates/admin/partials/lead_results.html
index c3ccbd3..71dca83 100644
--- a/web/src/padelnomics/admin/templates/admin/partials/lead_results.html
+++ b/web/src/padelnomics/admin/templates/admin/partials/lead_results.html
@@ -25,6 +25,7 @@
 
 {% if leads %}
 <div class="card">
+  <div style="overflow-x:auto">
   <table class="table">
     <thead>
       <tr>
@@ -58,6 +59,7 @@
       {% endfor %}
     </tbody>
   </table>
+  </div>
 </div>
 
 <!-- Pagination -->
diff --git a/web/src/padelnomics/admin/templates/admin/partials/outreach_results.html b/web/src/padelnomics/admin/templates/admin/partials/outreach_results.html
index adfea61..c2c96a3 100644
--- a/web/src/padelnomics/admin/templates/admin/partials/outreach_results.html
+++ b/web/src/padelnomics/admin/templates/admin/partials/outreach_results.html
@@ -1,5 +1,6 @@
 {% if suppliers %}
 <div class="card">
+  <div style="overflow-x:auto">
   <table class="table">
     <thead>
       <tr>
@@ -19,6 +20,7 @@
       {% endfor %}
     </tbody>
   </table>
+  </div>
 </div>
 {% else %}
 <div class="card text-center" style="padding:2rem">
diff --git a/web/src/padelnomics/admin/templates/admin/partials/supplier_results.html b/web/src/padelnomics/admin/templates/admin/partials/supplier_results.html
index 3dbc104..a292ebd 100644
--- a/web/src/padelnomics/admin/templates/admin/partials/supplier_results.html
+++ b/web/src/padelnomics/admin/templates/admin/partials/supplier_results.html
@@ -1,5 +1,6 @@
 {% if suppliers %}
 <div class="card">
+  <div style="overflow-x:auto">
   <table class="table">
     <thead>
       <tr>
@@ -47,6 +48,7 @@
       {% endfor %}
     </tbody>
   </table>
+  </div>
 </div>
 {% else %}
 <div class="card text-center" style="padding:2rem">
diff --git a/web/src/padelnomics/admin/templates/admin/pipeline.html b/web/src/padelnomics/admin/templates/admin/pipeline.html
index bbc2eb6..8f0124a 100644
--- a/web/src/padelnomics/admin/templates/admin/pipeline.html
+++ b/web/src/padelnomics/admin/templates/admin/pipeline.html
@@ -4,6 +4,15 @@
 
 {% block admin_head %}
 <style>
+  .pipeline-stat-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+  @media (min-width: 768px) {
+    .pipeline-stat-grid { grid-template-columns: repeat(4, 1fr); }
+  }
+
   .pipeline-tabs {
     display: flex; gap: 0; border-bottom: 2px solid #E2E8F0; margin-bottom: 1.5rem;
   }
@@ -46,7 +55,7 @@
   </header>
 
   <!-- Health stat cards -->
-  <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem" class="mb-6">
+  <div class="pipeline-stat-grid mb-6">
     <div class="card text-center" style="padding:0.875rem">
       <p class="text-xs text-slate">Total Runs</p>
       <p class="text-2xl font-bold text-navy metric">{{ summary.total | default(0) }}</p>
diff --git a/web/src/padelnomics/static/css/input.css b/web/src/padelnomics/static/css/input.css
index d1bba2d..37b292f 100644
--- a/web/src/padelnomics/static/css/input.css
+++ b/web/src/padelnomics/static/css/input.css
@@ -218,9 +218,7 @@
   .nav-bar[data-navopen="true"] .nav-mobile {
     display: flex;
   }
-  .nav-mobile a,
-  .nav-mobile button.nav-auth-btn,
-  .nav-mobile a.nav-auth-btn {
+  .nav-mobile a:not(.nav-auth-btn) {
     display: block;
     padding: 0.625rem 0;
     border-bottom: 1px solid #F1F5F9;
@@ -230,15 +228,18 @@
     text-decoration: none;
     transition: color 0.15s;
   }
-  .nav-mobile a:last-child { border-bottom: none; }
-  .nav-mobile a:hover { color: #1D4ED8; }
+  .nav-mobile a:not(.nav-auth-btn):last-child { border-bottom: none; }
+  .nav-mobile a:not(.nav-auth-btn):hover { color: #1D4ED8; }
+  /* nav-auth-btn in mobile menu: override block style, keep button colours */
   .nav-mobile a.nav-auth-btn,
   .nav-mobile button.nav-auth-btn {
     display: inline-flex;
     margin-top: 0.5rem;
+    padding: 6px 16px;
     border-bottom: none;
     width: auto;
     align-self: flex-start;
+    color: #fff;
   }
   .nav-mobile .nav-mobile-section {
     font-size: 0.6875rem;