From f5132d5a5c43792f27f920e88966ff7e6992ce91 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Sat, 16 May 2026 09:04:37 -0700
Subject: [PATCH] feat(ui): mobile fixes for Dashboard and Diagnose views

- DashboardView: p-4 sm:p-6 padding, overflow-x-auto on source health table
- DiagnoseView: p-4 sm:p-6 padding
- QuickCapture: px-4 sm:px-6 + shrink-0 on Search button to avoid input squeeze
---
 web/src/components/QuickCapture.vue | 2 +-
 web/src/views/DashboardView.vue     | 6 +++---
 web/src/views/DiagnoseView.vue      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/components/QuickCapture.vue b/web/src/components/QuickCapture.vue
index 28b11e3..1d71b14 100644
--- a/web/src/components/QuickCapture.vue
+++ b/web/src/components/QuickCapture.vue
@@ -14,7 +14,7 @@
       <button
         :disabled="loading || (!query.trim() && !sourceScope)"
         @click="run()"
-        class="px-6 py-2.5 rounded bg-accent text-white text-sm font-semibold hover:bg-blue-400 transition-colors disabled:opacity-50"
+        class="px-4 sm:px-6 py-2.5 rounded bg-accent text-white text-sm font-semibold hover:bg-blue-400 transition-colors disabled:opacity-50 shrink-0"
       >
         <span v-if="loading">Searching…</span>
         <span v-else>Search logs</span>
diff --git a/web/src/views/DashboardView.vue b/web/src/views/DashboardView.vue
index 01093d7..2a57604 100644
--- a/web/src/views/DashboardView.vue
+++ b/web/src/views/DashboardView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6 max-w-5xl mx-auto space-y-8">
+  <div class="p-4 sm:p-6 max-w-5xl mx-auto space-y-8">
 
     <!-- Watch status + freshness row -->
     <div v-if="!loading && stats" class="space-y-2">
@@ -65,8 +65,8 @@
         <RouterLink to="/sources" class="text-accent hover:underline ml-1">View all sources →</RouterLink>
       </div>
 
-      <div v-else class="rounded border border-surface-border overflow-hidden">
-        <table class="w-full text-sm">
+      <div v-else class="rounded border border-surface-border overflow-hidden overflow-x-auto">
+        <table class="w-full text-sm min-w-[480px]">
           <caption class="sr-only">Source health — last 24 hours</caption>
           <thead class="bg-surface-raised border-b border-surface-border">
             <tr>
diff --git a/web/src/views/DiagnoseView.vue b/web/src/views/DiagnoseView.vue
index fada17f..d434b31 100644
--- a/web/src/views/DiagnoseView.vue
+++ b/web/src/views/DiagnoseView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6 max-w-4xl mx-auto">
+  <div class="p-4 sm:p-6 max-w-4xl mx-auto">
     <div class="mb-5">
       <h1 class="text-text-primary text-xl font-semibold mb-1">Diagnose</h1>
       <p class="text-text-dim text-sm">