fix(admin): mobile UX fixes — contrast, scroll, responsive grids

- 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

@@ -3037,6 +3037,7 @@ async def outreach():
         current_search=search,
         current_follow_up=follow_up,
         page=page,
+        outreach_email=EMAIL_ADDRESSES["outreach"],
     )
 
 

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;

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>

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',

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>
@@ -39,6 +40,7 @@
     </tbody>
   </table>
   </div>
+</div>
 {% else %}
 <div class="card text-center" style="padding:2rem">
   <p class="text-slate">No emails match the current filters.</p>

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>
@@ -59,6 +60,7 @@
     </tbody>
   </table>
   </div>
+</div>
 
 <!-- Pagination -->
 {% if total > per_page %}

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>
@@ -20,6 +21,7 @@
     </tbody>
   </table>
   </div>
+</div>
 {% else %}
 <div class="card text-center" style="padding:2rem">
   <p class="text-slate">No suppliers match the current filters.</p>

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>
@@ -48,6 +49,7 @@
     </tbody>
   </table>
   </div>
+</div>
 {% else %}
 <div class="card text-center" style="padding:2rem">
   <p class="text-slate">No suppliers match the current filters.</p>

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>

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 a:not(.nav-auth-btn) {
-  .nav-mobile button.nav-auth-btn,
-  .nav-mobile a.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:not(.nav-auth-btn):last-child { border-bottom: none; }
-  .nav-mobile a:hover { color: #1D4ED8; }
+  .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;