From 90e7d1af29afff71f20dd3d9afcd2bcc8c3fd985 Mon Sep 17 00:00:00 2001
From: Adam Eivy <atomantic@gmail.com>
Date: Tue, 28 Apr 2026 07:08:48 +0000
Subject: [PATCH 1/2] style(client): improve mobile responsiveness across pages

Make page headers stack on mobile (flex-col sm:flex-row), reduce padding
on small screens (p-3 sm:p-4 md:p-6), enforce min-h-[40px] touch targets
on buttons/inputs/selects, add overflow-x-auto for tab bars and tables,
and use responsive grid breakpoints (grid-cols-2 sm:grid-cols-2
lg:grid-cols-4) to avoid skipped tiers.

Affected pages: Search, PathFinder, Indexer, Integrity, Audit, Favorites
(global + db-scoped), BrowserSettings, Gedcom, GenealogyProviders, Reports.
---
 client/src/components/audit/AuditPage.tsx     | 83 ++++++++++---------
 .../favorites/DatabaseFavoritesPage.tsx       | 48 +++++------
 .../components/favorites/FavoritesPage.tsx    | 38 ++++-----
 client/src/components/indexer/IndexerPage.tsx | 39 +++++----
 .../components/integrity/IntegrityPage.tsx    | 46 +++++-----
 client/src/components/path/PathFinder.tsx     | 41 ++++-----
 client/src/components/search/SearchPage.tsx   | 43 +++++-----
 client/src/pages/BrowserSettingsPage.tsx      | 27 +++---
 client/src/pages/GedcomPage.tsx               | 28 +++----
 client/src/pages/GenealogyProviders.tsx       | 49 +++++------
 client/src/pages/ReportsPage.tsx              | 34 ++++----
 11 files changed, 243 insertions(+), 233 deletions(-)

diff --git a/client/src/components/audit/AuditPage.tsx b/client/src/components/audit/AuditPage.tsx
index 84505a4..3c3effb 100644
--- a/client/src/components/audit/AuditPage.tsx
+++ b/client/src/components/audit/AuditPage.tsx
@@ -341,24 +341,24 @@ export function AuditPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-4 md:space-y-6 p-3 sm:p-4 md:p-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <Scan size={24} className="text-app-accent" />
-          <div>
-            <h1 className="text-2xl font-bold text-app-text">Tree Auditor</h1>
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div className="flex items-center gap-3 min-w-0">
+          <Scan size={24} className="text-app-accent flex-shrink-0" />
+          <div className="min-w-0">
+            <h1 className="text-xl sm:text-2xl font-bold text-app-text">Tree Auditor</h1>
             {database && (
-              <p className="text-sm text-app-text-muted">{database.rootName || database.id}</p>
+              <p className="text-sm text-app-text-muted truncate">{database.rootName || database.id}</p>
             )}
           </div>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
           {/* Config toggle */}
           <button
             onClick={() => setShowConfig(!showConfig)}
-            className="px-3 py-2 rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors text-sm flex items-center gap-1"
+            className="px-3 py-2 min-h-[40px] rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors text-sm flex items-center gap-1"
           >
             <ChevronDown size={14} className={`transition-transform ${showConfig ? 'rotate-180' : ''}`} />
             Config
@@ -368,7 +368,7 @@ export function AuditPage() {
           {!isRunning && activeRun?.status !== 'paused' && (
             <button
               onClick={startAudit}
-              className="px-3 py-2 rounded-lg bg-app-accent text-white hover:bg-app-accent/90 transition-colors text-sm flex items-center gap-1"
+              className="px-3 py-2 min-h-[40px] rounded-lg bg-app-accent text-white hover:bg-app-accent/90 transition-colors text-sm flex items-center gap-1"
             >
               <Play size={14} /> Start Audit
             </button>
@@ -377,13 +377,13 @@ export function AuditPage() {
             <>
               <button
                 onClick={resumeAudit}
-                className="px-3 py-2 rounded-lg bg-app-accent text-white hover:bg-app-accent/90 transition-colors text-sm flex items-center gap-1"
+                className="px-3 py-2 min-h-[40px] rounded-lg bg-app-accent text-white hover:bg-app-accent/90 transition-colors text-sm flex items-center gap-1"
               >
                 <Play size={14} /> Resume
               </button>
               <button
                 onClick={cancelAudit}
-                className="px-3 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors text-sm flex items-center gap-1"
+                className="px-3 py-2 min-h-[40px] rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors text-sm flex items-center gap-1"
               >
                 <Square size={14} /> Cancel
               </button>
@@ -393,13 +393,13 @@ export function AuditPage() {
             <>
               <button
                 onClick={pauseAudit}
-                className="px-3 py-2 rounded-lg bg-yellow-600 text-white hover:bg-yellow-700 transition-colors text-sm flex items-center gap-1"
+                className="px-3 py-2 min-h-[40px] rounded-lg bg-yellow-600 text-white hover:bg-yellow-700 transition-colors text-sm flex items-center gap-1"
               >
                 <Pause size={14} /> Pause
               </button>
               <button
                 onClick={cancelAudit}
-                className="px-3 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors text-sm flex items-center gap-1"
+                className="px-3 py-2 min-h-[40px] rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors text-sm flex items-center gap-1"
               >
                 <Square size={14} /> Cancel
               </button>
@@ -410,8 +410,8 @@ export function AuditPage() {
 
       {/* Config panel */}
       {showConfig && config && (
-        <div className="bg-app-card border border-app-border rounded-lg p-4">
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
             <div>
               <label className="block text-xs text-app-text-muted mb-1">Depth Limit</label>
               <div className="flex items-center gap-2">
@@ -422,7 +422,7 @@ export function AuditPage() {
                   value={depthLimit ?? ''}
                   placeholder="Unlimited"
                   onChange={(e) => setDepthLimit(e.target.value ? parseInt(e.target.value, 10) : null)}
-                  className="w-24 px-3 py-1.5 rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
+                  className="w-24 px-3 py-2 min-h-[40px] rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
                 />
                 <span className="text-xs text-app-text-muted">generations</span>
               </div>
@@ -465,7 +465,7 @@ export function AuditPage() {
 
       {/* Summary cards */}
       {runs.length > 0 && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
           <SummaryCard
             label="Total Runs"
             value={runs.length}
@@ -493,13 +493,13 @@ export function AuditPage() {
       )}
 
       {/* Tabs */}
-      <div className="border-b border-app-border">
-        <div className="flex gap-1">
+      <div className="border-b border-app-border overflow-x-auto">
+        <div className="flex gap-1 min-w-max">
           {TABS.map(t => (
             <button
               key={t.id}
               onClick={() => setActiveTab(t.id)}
-              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+              className={`px-4 py-2 min-h-[40px] text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                 activeTab === t.id
                   ? 'border-app-accent text-app-accent'
                   : 'border-transparent text-app-text-muted hover:text-app-text hover:border-app-border'
@@ -608,11 +608,11 @@ function IssuesTab({ issues, loading, filter, onFilterChange, selectedIds, onTog
   return (
     <div className="space-y-4">
       {/* Filters and bulk actions */}
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-wrap items-center gap-2 sm:gap-3">
         <select
           value={filter.type || ''}
           onChange={(e) => onFilterChange({ ...filter, type: (e.target.value || undefined) as AuditIssueType | undefined })}
-          className="px-3 py-1.5 rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
+          className="px-3 py-2 min-h-[40px] rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
         >
           <option value="">All Types</option>
           {Object.entries(ISSUE_TYPE_LABELS).map(([k, v]) => (
@@ -623,7 +623,7 @@ function IssuesTab({ issues, loading, filter, onFilterChange, selectedIds, onTog
         <select
           value={filter.severity || ''}
           onChange={(e) => onFilterChange({ ...filter, severity: (e.target.value || undefined) as AuditIssueSeverity | undefined })}
-          className="px-3 py-1.5 rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
+          className="px-3 py-2 min-h-[40px] rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
         >
           <option value="">All Severities</option>
           <option value="error">Error</option>
@@ -635,7 +635,7 @@ function IssuesTab({ issues, loading, filter, onFilterChange, selectedIds, onTog
         <select
           value={filter.status || ''}
           onChange={(e) => onFilterChange({ ...filter, status: e.target.value || undefined })}
-          className="px-3 py-1.5 rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
+          className="px-3 py-2 min-h-[40px] rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
         >
           <option value="">All Statuses</option>
           <option value="open">Open</option>
@@ -647,24 +647,25 @@ function IssuesTab({ issues, loading, filter, onFilterChange, selectedIds, onTog
         <button
           onClick={onRefresh}
           disabled={loading}
-          className="px-3 py-1.5 rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors text-sm"
+          className="px-3 py-2 min-h-[40px] min-w-[40px] flex items-center justify-center rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors text-sm"
+          aria-label="Refresh"
         >
           <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
         </button>
 
         {selectedIds.size > 0 && (
-          <div className="flex items-center gap-2 ml-auto">
+          <div className="flex items-center gap-2 sm:ml-auto flex-wrap">
             <span className="text-xs text-app-text-muted">{selectedIds.size} selected</span>
             <button
               onClick={() => onAccept(Array.from(selectedIds))}
-              className="px-3 py-1.5 rounded-lg bg-green-600 text-white hover:bg-green-700 transition-colors text-sm flex items-center gap-1"
+              className="px-3 py-2 min-h-[40px] rounded-lg bg-green-600 text-white hover:bg-green-700 transition-colors text-sm flex items-center gap-1"
               title="Apply fixes where available, dismiss the rest"
             >
               <CheckCheck size={14} /> Accept All
             </button>
             <button
               onClick={() => onReject(Array.from(selectedIds))}
-              className="px-3 py-1.5 rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors text-sm flex items-center gap-1"
+              className="px-3 py-2 min-h-[40px] rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors text-sm flex items-center gap-1"
               title="Mark selected as not real issues"
             >
               <XCircle size={14} /> Reject All
@@ -685,7 +686,7 @@ function IssuesTab({ issues, loading, filter, onFilterChange, selectedIds, onTog
         </div>
       ) : (
         <div className="overflow-x-auto">
-          <table className="w-full text-sm">
+          <table className="w-full text-sm min-w-[760px]">
             <thead>
               <tr className="border-b border-app-border text-left text-app-text-muted">
                 <th className="py-2 px-3 w-8">
@@ -799,7 +800,8 @@ function ChangesTab({ changes, loading, onUndo, onRefresh, dbId }: {
         <button
           onClick={onRefresh}
           disabled={loading}
-          className="px-3 py-1.5 rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors text-sm"
+          className="px-3 py-2 min-h-[40px] min-w-[40px] flex items-center justify-center rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors text-sm"
+          aria-label="Refresh"
         >
           <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
         </button>
@@ -884,7 +886,8 @@ function RunsTab({ runs, loading, expandedRunId, runSummary, onExpand, onRefresh
         <button
           onClick={onRefresh}
           disabled={loading}
-          className="px-3 py-1.5 rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors text-sm"
+          className="px-3 py-2 min-h-[40px] min-w-[40px] flex items-center justify-center rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors text-sm"
+          aria-label="Refresh"
         >
           <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
         </button>
@@ -905,28 +908,28 @@ function RunsTab({ runs, loading, expandedRunId, runSummary, onExpand, onRefresh
             <div key={run.runId} className="bg-app-card border border-app-border rounded-lg">
               <button
                 onClick={() => onExpand(run.runId)}
-                className="w-full p-4 text-left hover:bg-app-hover transition-colors rounded-lg flex items-center justify-between"
+                className="w-full p-3 sm:p-4 text-left hover:bg-app-hover transition-colors rounded-lg flex items-center justify-between gap-2"
               >
-                <div className="flex items-center gap-3">
-                  <span className={`px-2 py-0.5 rounded text-xs ${RUN_STATUS_COLORS[run.status] || ''}`}>
+                <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 min-w-0">
+                  <span className={`px-2 py-0.5 rounded text-xs ${RUN_STATUS_COLORS[run.status] || ''} self-start`}>
                     {run.status}
                   </span>
-                  <span className="text-sm text-app-text">
+                  <span className="text-sm text-app-text truncate">
                     {run.startedAt ? new Date(run.startedAt).toLocaleString() : 'Queued'}
                   </span>
-                  <span className="text-xs text-app-text-muted">
+                  <span className="text-xs text-app-text-muted truncate">
                     {run.personsChecked} checked &middot; {run.issuesFound} issues &middot; {run.fixesApplied} fixes
                   </span>
                 </div>
                 <ChevronDown
                   size={16}
-                  className={`text-app-text-muted transition-transform ${expandedRunId === run.runId ? 'rotate-180' : ''}`}
+                  className={`text-app-text-muted transition-transform flex-shrink-0 ${expandedRunId === run.runId ? 'rotate-180' : ''}`}
                 />
               </button>
 
               {expandedRunId === run.runId && runSummary && (
-                <div className="px-4 pb-4 border-t border-app-border/50 pt-3">
-                  <div className="grid grid-cols-3 gap-4 text-sm">
+                <div className="px-3 sm:px-4 pb-3 sm:pb-4 border-t border-app-border/50 pt-3">
+                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 text-sm">
                     <div>
                       <p className="text-xs text-app-text-muted mb-1">By Type</p>
                       {Object.entries(runSummary.issuesByType).map(([type, count]) => (
diff --git a/client/src/components/favorites/DatabaseFavoritesPage.tsx b/client/src/components/favorites/DatabaseFavoritesPage.tsx
index 21a2260..e0022ea 100644
--- a/client/src/components/favorites/DatabaseFavoritesPage.tsx
+++ b/client/src/components/favorites/DatabaseFavoritesPage.tsx
@@ -95,39 +95,39 @@ export function DatabaseFavoritesPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-4 md:space-y-6 p-3 sm:p-4 md:p-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <Star size={28} className="text-yellow-400 fill-current" />
-          <div>
-            <h1 className="text-2xl font-bold text-app-text">Favorites</h1>
-            <div className="flex items-center gap-2 text-sm text-app-text-muted">
-              <Database size={14} />
-              <span>{database?.rootName || dbId}</span>
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div className="flex items-center gap-3 min-w-0">
+          <Star size={28} className="text-yellow-400 fill-current flex-shrink-0" />
+          <div className="min-w-0">
+            <h1 className="text-xl sm:text-2xl font-bold text-app-text">Favorites</h1>
+            <div className="flex items-center gap-2 text-sm text-app-text-muted flex-wrap">
+              <Database size={14} className="flex-shrink-0" />
+              <span className="truncate">{database?.rootName || dbId}</span>
               <span className="text-app-text-subtle">•</span>
               <span>{total} favorites</span>
             </div>
           </div>
         </div>
-        <div className="flex gap-2">
+        <div className="flex gap-2 flex-wrap">
           <button
             onClick={() => setShowDiscoveryModal(true)}
-            className="px-3 py-1.5 bg-purple-600 text-white rounded hover:bg-purple-700 text-sm flex items-center gap-1"
+            className="px-3 py-2 min-h-[40px] bg-purple-600 text-white rounded hover:bg-purple-700 text-sm flex items-center gap-1"
           >
             <Sparkles size={14} />
             AI Discovery
           </button>
           <Link
             to="/favorites"
-            className="px-3 py-1.5 bg-app-border text-app-text-secondary rounded hover:bg-app-hover text-sm"
+            className="px-3 py-2 min-h-[40px] flex items-center bg-app-border text-app-text-secondary rounded hover:bg-app-hover text-sm"
           >
             All Favorites
           </Link>
           {total > 0 && (
             <Link
               to={`/favorites/sparse-tree/${dbId}`}
-              className="px-3 py-1.5 bg-app-accent text-app-text rounded hover:bg-app-accent/80 text-sm flex items-center gap-1"
+              className="px-3 py-2 min-h-[40px] bg-app-accent text-app-text rounded hover:bg-app-accent/80 text-sm flex items-center gap-1"
             >
               <Network size={14} />
               Sparse Tree
@@ -137,17 +137,17 @@ export function DatabaseFavoritesPage() {
       </div>
 
       {/* Filters bar */}
-      <div className="bg-app-card border border-app-border rounded-lg p-4">
-        <div className="flex flex-wrap gap-4">
+      <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4">
+        <div className="flex flex-wrap gap-2 sm:gap-3">
           {/* Search */}
-          <div className="relative flex-1 min-w-[200px]">
+          <div className="relative flex-1 min-w-[180px]">
             <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-app-text-subtle" />
             <input
               type="text"
               value={searchQuery}
               onChange={e => updateFilter('q', e.target.value)}
               placeholder="Search favorites..."
-              className="w-full pl-9 pr-3 py-2 bg-app-bg border border-app-border rounded text-app-text placeholder-app-placeholder focus:border-app-accent focus:outline-none"
+              className="w-full pl-9 pr-3 py-2 min-h-[40px] bg-app-bg border border-app-border rounded text-app-text placeholder-app-placeholder focus:border-app-accent focus:outline-none"
             />
           </div>
 
@@ -158,7 +158,7 @@ export function DatabaseFavoritesPage() {
               <select
                 value={selectedTag}
                 onChange={e => updateFilter('tag', e.target.value)}
-                className="pl-9 pr-8 py-2 bg-app-bg border border-app-border rounded text-app-text focus:border-app-accent focus:outline-none appearance-none cursor-pointer"
+                className="pl-9 pr-8 py-2 min-h-[40px] bg-app-bg border border-app-border rounded text-app-text focus:border-app-accent focus:outline-none appearance-none cursor-pointer"
               >
                 <option value="">All Tags</option>
                 {allTags.map(tag => (
@@ -172,7 +172,7 @@ export function DatabaseFavoritesPage() {
           {hasFilters && (
             <button
               onClick={clearFilters}
-              className="flex items-center gap-1 px-3 py-2 text-app-text-muted hover:text-app-text transition-colors"
+              className="flex items-center gap-1 px-3 py-2 min-h-[40px] text-app-text-muted hover:text-app-text transition-colors"
             >
               <X size={16} />
               Clear
@@ -204,7 +204,7 @@ export function DatabaseFavoritesPage() {
           )}
         </div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
           {filteredFavorites.map(fav => (
             <FavoriteCard key={fav.personId} favorite={fav} dbId={dbId} />
           ))}
@@ -213,21 +213,21 @@ export function DatabaseFavoritesPage() {
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <div className="flex justify-center gap-2">
+        <div className="flex justify-center items-center gap-2">
           <button
             onClick={() => setPage(p => Math.max(1, p - 1))}
             disabled={page === 1}
-            className="px-3 py-1 bg-app-border text-app-text-secondary rounded hover:bg-app-hover disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-3 py-2 min-h-[40px] bg-app-border text-app-text-secondary rounded hover:bg-app-hover disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Previous
           </button>
-          <span className="px-3 py-1 text-app-text-muted">
+          <span className="px-3 py-2 min-h-[40px] flex items-center text-app-text-muted text-sm whitespace-nowrap">
             Page {page} of {totalPages}
           </span>
           <button
             onClick={() => setPage(p => Math.min(totalPages, p + 1))}
             disabled={page === totalPages}
-            className="px-3 py-1 bg-app-border text-app-text-secondary rounded hover:bg-app-hover disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-3 py-2 min-h-[40px] bg-app-border text-app-text-secondary rounded hover:bg-app-hover disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Next
           </button>
diff --git a/client/src/components/favorites/FavoritesPage.tsx b/client/src/components/favorites/FavoritesPage.tsx
index 083dea8..180517a 100644
--- a/client/src/components/favorites/FavoritesPage.tsx
+++ b/client/src/components/favorites/FavoritesPage.tsx
@@ -88,12 +88,12 @@ export function FavoritesPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-4 md:space-y-6 p-3 sm:p-4 md:p-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <Star size={28} className="text-yellow-400 fill-current" />
-          <h1 className="text-2xl font-bold text-app-text">Favorites</h1>
+      <div className="flex items-center justify-between flex-wrap gap-2">
+        <div className="flex items-center gap-2 sm:gap-3 min-w-0">
+          <Star size={28} className="text-yellow-400 fill-current flex-shrink-0" />
+          <h1 className="text-xl sm:text-2xl font-bold text-app-text">Favorites</h1>
           <span className="px-2 py-0.5 bg-app-border text-app-text-muted rounded text-sm">
             {total} total
           </span>
@@ -101,17 +101,17 @@ export function FavoritesPage() {
       </div>
 
       {/* Filters bar */}
-      <div className="bg-app-card border border-app-border rounded-lg p-4">
-        <div className="flex flex-wrap gap-4">
+      <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4">
+        <div className="flex flex-wrap gap-2 sm:gap-3">
           {/* Search */}
-          <div className="relative flex-1 min-w-[200px]">
+          <div className="relative flex-1 min-w-[180px]">
             <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-app-text-subtle" />
             <input
               type="text"
               value={searchQuery}
               onChange={e => updateFilter('q', e.target.value)}
               placeholder="Search favorites..."
-              className="w-full pl-9 pr-3 py-2 bg-app-bg border border-app-border rounded text-app-text placeholder-app-placeholder focus:border-app-accent focus:outline-none"
+              className="w-full pl-9 pr-3 py-2 min-h-[40px] bg-app-bg border border-app-border rounded text-app-text placeholder-app-placeholder focus:border-app-accent focus:outline-none"
             />
           </div>
 
@@ -121,7 +121,7 @@ export function FavoritesPage() {
             <select
               value={selectedTag}
               onChange={e => updateFilter('tag', e.target.value)}
-              className="pl-9 pr-8 py-2 bg-app-bg border border-app-border rounded text-app-text focus:border-app-accent focus:outline-none appearance-none cursor-pointer"
+              className="pl-9 pr-8 py-2 min-h-[40px] bg-app-bg border border-app-border rounded text-app-text focus:border-app-accent focus:outline-none appearance-none cursor-pointer"
             >
               <option value="">All Tags</option>
               {allTags.map(tag => (
@@ -134,7 +134,7 @@ export function FavoritesPage() {
           <select
             value={selectedDb}
             onChange={e => updateFilter('db', e.target.value)}
-            className="px-3 py-2 bg-app-bg border border-app-border rounded text-app-text focus:border-app-accent focus:outline-none appearance-none cursor-pointer"
+            className="px-3 py-2 min-h-[40px] bg-app-bg border border-app-border rounded text-app-text focus:border-app-accent focus:outline-none appearance-none cursor-pointer"
           >
             <option value="">All Databases</option>
             {databasesWithFavorites.map(db => (
@@ -148,7 +148,7 @@ export function FavoritesPage() {
           {hasFilters && (
             <button
               onClick={clearFilters}
-              className="flex items-center gap-1 px-3 py-2 text-app-text-muted hover:text-app-text transition-colors"
+              className="flex items-center gap-1 px-3 py-2 min-h-[40px] text-app-text-muted hover:text-app-text transition-colors"
             >
               <X size={16} />
               Clear
@@ -159,7 +159,7 @@ export function FavoritesPage() {
 
       {/* Sparse Tree Links for databases with favorites */}
       {databasesWithFavorites.length > 0 && (
-        <div className="bg-app-card border border-app-border rounded-lg p-4">
+        <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4">
           <h3 className="text-sm font-medium text-app-text-secondary mb-3">View Sparse Tree</h3>
           <div className="flex flex-wrap gap-2">
             {databasesWithFavorites.map(db => {
@@ -168,7 +168,7 @@ export function FavoritesPage() {
                 <Link
                   key={db.id}
                   to={`/favorites/sparse-tree/${db.id}`}
-                  className="inline-flex items-center gap-2 px-3 py-1.5 bg-app-bg border border-app-border rounded hover:border-app-accent transition-colors"
+                  className="inline-flex items-center gap-2 px-3 py-2 min-h-[40px] bg-app-bg border border-app-border rounded hover:border-app-accent transition-colors"
                 >
                   <Network size={16} className="text-app-accent" />
                   <span className="text-app-text text-sm">{db.rootName || db.id}</span>
@@ -197,7 +197,7 @@ export function FavoritesPage() {
           </p>
         </div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
           {filteredFavorites.map(fav => (
             <FavoriteCard key={fav.personId} favorite={fav} databases={databases} />
           ))}
@@ -206,21 +206,21 @@ export function FavoritesPage() {
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <div className="flex justify-center gap-2">
+        <div className="flex justify-center items-center gap-2">
           <button
             onClick={() => setPage(p => Math.max(1, p - 1))}
             disabled={page === 1}
-            className="px-3 py-1 bg-app-border text-app-text-secondary rounded hover:bg-app-hover disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-3 py-2 min-h-[40px] bg-app-border text-app-text-secondary rounded hover:bg-app-hover disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Previous
           </button>
-          <span className="px-3 py-1 text-app-text-muted">
+          <span className="px-3 py-2 min-h-[40px] flex items-center text-app-text-muted text-sm whitespace-nowrap">
             Page {page} of {totalPages}
           </span>
           <button
             onClick={() => setPage(p => Math.min(totalPages, p + 1))}
             disabled={page === totalPages}
-            className="px-3 py-1 bg-app-border text-app-text-secondary rounded hover:bg-app-hover disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-3 py-2 min-h-[40px] bg-app-border text-app-text-secondary rounded hover:bg-app-hover disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Next
           </button>
diff --git a/client/src/components/indexer/IndexerPage.tsx b/client/src/components/indexer/IndexerPage.tsx
index c810828..4bb3ea6 100644
--- a/client/src/components/indexer/IndexerPage.tsx
+++ b/client/src/components/indexer/IndexerPage.tsx
@@ -143,13 +143,13 @@ export function IndexerPage() {
   const canStartIndexing = browserStatus?.connected && browserStatus?.familySearchLoggedIn && rootId;
 
   return (
-    <div className="w-full p-6">
-      <h1 className="text-2xl font-bold mb-6 text-app-text">Indexer</h1>
+    <div className="w-full p-3 sm:p-4 md:p-6">
+      <h1 className="text-xl sm:text-2xl font-bold mb-4 md:mb-6 text-app-text">Indexer</h1>
 
       {/* Top Row - Controls */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mb-4 md:mb-6">
         {/* Browser Status Panel */}
-        <div className="bg-app-card rounded-lg border border-app-border p-4">
+        <div className="bg-app-card rounded-lg border border-app-border p-3 sm:p-4">
           <h2 className="font-semibold mb-3 text-app-text">Browser Connection</h2>
 
           <div className="space-y-2 mb-4">
@@ -186,7 +186,7 @@ export function IndexerPage() {
               <button
                 onClick={handleLaunchBrowser}
                 disabled={isLaunching}
-                className="px-3 py-1.5 text-sm bg-app-accent text-app-text rounded hover:bg-app-accent-hover disabled:opacity-50"
+                className="px-3 py-2 min-h-[40px] text-sm bg-app-accent text-app-text rounded hover:bg-app-accent-hover disabled:opacity-50"
               >
                 {isLaunching ? 'Launching...' : 'Launch Browser'}
               </button>
@@ -196,7 +196,7 @@ export function IndexerPage() {
               <button
                 onClick={handleConnectBrowser}
                 disabled={isConnecting}
-                className="px-3 py-1.5 text-sm bg-app-accent text-app-text rounded hover:bg-app-accent-hover disabled:opacity-50"
+                className="px-3 py-2 min-h-[40px] text-sm bg-app-accent text-app-text rounded hover:bg-app-accent-hover disabled:opacity-50"
               >
                 {isConnecting ? 'Connecting...' : 'Connect'}
               </button>
@@ -206,7 +206,7 @@ export function IndexerPage() {
               <button
                 onClick={handleOpenFamilySearch}
                 disabled={isConnecting}
-                className="px-3 py-1.5 text-sm bg-app-accent text-app-text rounded hover:bg-app-accent-hover disabled:opacity-50"
+                className="px-3 py-2 min-h-[40px] text-sm bg-app-accent text-app-text rounded hover:bg-app-accent-hover disabled:opacity-50"
               >
                 Open FamilySearch
               </button>
@@ -214,7 +214,7 @@ export function IndexerPage() {
 
             <button
               onClick={refreshBrowser}
-              className="px-3 py-1.5 text-sm bg-app-card-hover text-app-text-secondary rounded hover:bg-app-border disabled:opacity-50"
+              className="px-3 py-2 min-h-[40px] text-sm bg-app-card-hover text-app-text-secondary rounded hover:bg-app-border disabled:opacity-50"
             >
               Refresh
             </button>
@@ -222,7 +222,7 @@ export function IndexerPage() {
         </div>
 
         {/* Indexer Status */}
-        <div className="bg-app-card rounded-lg border border-app-border p-4">
+        <div className="bg-app-card rounded-lg border border-app-border p-3 sm:p-4">
           <h2 className="font-semibold mb-2 text-app-text">Status</h2>
           <div className="flex items-center gap-2 mb-3">
             <span className={`w-3 h-3 rounded-full ${
@@ -251,7 +251,7 @@ export function IndexerPage() {
             <button
               onClick={handleStop}
               disabled={loading}
-              className="w-full mt-4 px-4 py-2 bg-app-error text-white rounded-md hover:opacity-90 disabled:opacity-50"
+              className="w-full mt-4 px-4 py-2 min-h-[40px] bg-app-error text-white rounded-md hover:opacity-90 disabled:opacity-50"
             >
               {loading ? 'Stopping...' : 'Stop Indexing'}
             </button>
@@ -259,7 +259,7 @@ export function IndexerPage() {
         </div>
 
         {/* Start Form */}
-        <div className="bg-app-card rounded-lg border border-app-border p-4">
+        <div className="bg-app-card rounded-lg border border-app-border p-3 sm:p-4 md:col-span-2 lg:col-span-1">
           <h2 className="font-semibold mb-4 text-app-text">Start Indexing</h2>
 
           <div className="space-y-3">
@@ -272,7 +272,7 @@ export function IndexerPage() {
                 value={rootId}
                 onChange={e => setRootId(e.target.value.toUpperCase())}
                 placeholder="e.g., KWCJ-RN4"
-                className="w-full px-3 py-2 border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
+                className="w-full px-3 py-2 min-h-[40px] border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
               />
             </div>
 
@@ -286,7 +286,7 @@ export function IndexerPage() {
                   value={maxGenerations}
                   onChange={e => setMaxGenerations(e.target.value)}
                   placeholder="∞"
-                  className="w-full px-3 py-2 border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
+                  className="w-full px-3 py-2 min-h-[40px] border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
                 />
               </div>
 
@@ -297,7 +297,7 @@ export function IndexerPage() {
                 <select
                   value={cacheMode}
                   onChange={e => setCacheMode(e.target.value as 'all' | 'complete' | 'none')}
-                  className="w-full px-3 py-2 border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
+                  className="w-full px-3 py-2 min-h-[40px] border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
                 >
                   <option value="all">All</option>
                   <option value="complete">Complete</option>
@@ -316,7 +316,7 @@ export function IndexerPage() {
                   value={oldest}
                   onChange={e => setOldest(e.target.value)}
                   placeholder="e.g., 500BC"
-                  className="w-full px-3 py-2 border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
+                  className="w-full px-3 py-2 min-h-[40px] border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
                 />
               </div>
 
@@ -329,7 +329,7 @@ export function IndexerPage() {
                   value={ignoreIds}
                   onChange={e => setIgnoreIds(e.target.value.toUpperCase())}
                   placeholder="ID1,ID2"
-                  className="w-full px-3 py-2 border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
+                  className="w-full px-3 py-2 min-h-[40px] border rounded-md bg-app-bg text-app-text border-app-border focus:border-app-accent focus:outline-none text-sm"
                 />
               </div>
             </div>
@@ -337,7 +337,7 @@ export function IndexerPage() {
             <button
               onClick={handleStart}
               disabled={loading || !canStartIndexing || isRunning}
-              className="w-full px-4 py-2 bg-app-accent text-app-text rounded-md hover:bg-app-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2 min-h-[40px] bg-app-accent text-app-text rounded-md hover:bg-app-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {loading ? 'Starting...' : 'Start Indexing'}
             </button>
@@ -364,15 +364,14 @@ export function IndexerPage() {
       )}
 
       {/* Full Width Output Console */}
-      <div className="bg-app-card rounded-lg border border-app-border p-4">
+      <div className="bg-app-card rounded-lg border border-app-border p-3 sm:p-4">
         <div className="flex items-center justify-between mb-3">
           <h2 className="font-semibold text-app-text">Output</h2>
           <span className="text-xs text-app-text-muted">{outputLines.length} lines</span>
         </div>
         <div
           ref={outputRef}
-          className="bg-gray-900 rounded-md p-3 overflow-auto font-mono text-xs text-gray-300 whitespace-pre"
-          style={{ height: '400px' }}
+          className="bg-gray-900 rounded-md p-2 sm:p-3 overflow-auto font-mono text-[10px] sm:text-xs text-gray-300 whitespace-pre h-[260px] sm:h-[320px] md:h-[400px]"
         >
           {outputLines.length === 0 ? (
             <span className="text-gray-500 italic">Output will appear here when indexing starts...</span>
diff --git a/client/src/components/integrity/IntegrityPage.tsx b/client/src/components/integrity/IntegrityPage.tsx
index de30fcd..c90892b 100644
--- a/client/src/components/integrity/IntegrityPage.tsx
+++ b/client/src/components/integrity/IntegrityPage.tsx
@@ -222,20 +222,20 @@ export function IntegrityPage() {
   const dbName = database?.rootName || dbId;
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-4 md:space-y-6 p-3 sm:p-4 md:p-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <ShieldCheck size={24} className="text-app-accent" />
-          <div>
-            <h1 className="text-2xl font-bold text-app-text">Data Integrity</h1>
-            <p className="text-sm text-app-text-muted">{dbName}</p>
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div className="flex items-center gap-3 min-w-0">
+          <ShieldCheck size={24} className="text-app-accent flex-shrink-0" />
+          <div className="min-w-0">
+            <h1 className="text-xl sm:text-2xl font-bold text-app-text">Data Integrity</h1>
+            <p className="text-sm text-app-text-muted truncate">{dbName}</p>
           </div>
         </div>
         <button
           onClick={runChecks}
           disabled={refreshing}
-          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors disabled:opacity-50"
+          className="flex items-center justify-center gap-2 px-3 py-2 min-h-[40px] rounded-lg bg-app-card border border-app-border text-app-text hover:bg-app-hover transition-colors disabled:opacity-50 self-start sm:self-auto"
         >
           {refreshing ? (
             <Loader2 size={16} className="animate-spin" />
@@ -247,7 +247,7 @@ export function IntegrityPage() {
       </div>
 
       {/* Summary Cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
         <SummaryCard
           label="Coverage Gaps"
           count={summary?.coverageGaps ?? -1}
@@ -283,13 +283,13 @@ export function IntegrityPage() {
       </div>
 
       {/* Tab Navigation */}
-      <div className="border-b border-app-border">
-        <div className="flex gap-1">
+      <div className="border-b border-app-border overflow-x-auto">
+        <div className="flex gap-1 min-w-max">
           {TABS.map(tab => (
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
-              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+              className={`px-4 py-2 min-h-[40px] text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                 activeTab === tab.id
                   ? 'border-app-accent text-app-accent'
                   : 'border-transparent text-app-text-muted hover:text-app-text hover:border-app-border'
@@ -400,13 +400,13 @@ function ParentsTab({
   return (
     <div className="space-y-4">
       {/* Controls */}
-      <div className="flex items-center gap-4 flex-wrap">
-        <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 sm:gap-4 flex-wrap">
+        <div className="flex items-center gap-2 flex-wrap">
           <label className="text-sm text-app-text-muted">Provider:</label>
           <select
             value={selectedProvider}
             onChange={e => onProviderChange(e.target.value as BuiltInProvider)}
-            className="px-3 py-1.5 rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
+            className="px-3 py-2 min-h-[40px] rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
             disabled={discoveryRunning}
           >
             {PROVIDER_OPTIONS.map(opt => (
@@ -419,7 +419,7 @@ function ParentsTab({
           <button
             onClick={onStartDiscovery}
             disabled={gaps.length === 0}
-            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-app-accent text-white text-sm hover:bg-app-accent/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex items-center gap-2 px-3 py-2 min-h-[40px] rounded-lg bg-app-accent text-white text-sm hover:bg-app-accent/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <Play size={14} />
             Discover All ({gaps.length})
@@ -427,7 +427,7 @@ function ParentsTab({
         ) : (
           <button
             onClick={onCancelDiscovery}
-            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-red-600 text-white text-sm hover:bg-red-700 transition-colors"
+            className="flex items-center gap-2 px-3 py-2 min-h-[40px] rounded-lg bg-red-600 text-white text-sm hover:bg-red-700 transition-colors"
           >
             <Square size={14} />
             Cancel
@@ -481,8 +481,8 @@ function ParentsTab({
       ) : gaps.length === 0 ? (
         <EmptyState message={`No parent linkage gaps for ${selectedProvider}`} />
       ) : (
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
+        <div className="overflow-x-auto -mx-3 sm:mx-0">
+          <table className="w-full text-sm min-w-[560px]">
             <thead>
               <tr className="border-b border-app-border text-left text-app-text-muted">
                 <th className="py-2 px-3">Child</th>
@@ -636,7 +636,7 @@ function StaleTab({
   return (
     <div className="space-y-4">
       {/* Days threshold */}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 flex-wrap">
         <label className="text-sm text-app-text-muted">Older than:</label>
         <input
           type="number"
@@ -644,7 +644,7 @@ function StaleTab({
           onChange={e => onDaysChange(parseInt(e.target.value) || 30)}
           min={1}
           max={365}
-          className="w-20 px-3 py-1.5 rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
+          className="w-20 px-3 py-2 min-h-[40px] rounded-lg bg-app-bg border border-app-border text-app-text text-sm"
         />
         <span className="text-sm text-app-text-muted">days</span>
       </div>
@@ -654,8 +654,8 @@ function StaleTab({
       ) : records.length === 0 ? (
         <EmptyState message={`No provider cache older than ${days} days`} />
       ) : (
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
+        <div className="overflow-x-auto -mx-3 sm:mx-0">
+          <table className="w-full text-sm min-w-[560px]">
             <thead>
               <tr className="border-b border-app-border text-left text-app-text-muted">
                 <th className="py-2 px-3">Person</th>
diff --git a/client/src/components/path/PathFinder.tsx b/client/src/components/path/PathFinder.tsx
index f1a2605..054aa90 100644
--- a/client/src/components/path/PathFinder.tsx
+++ b/client/src/components/path/PathFinder.tsx
@@ -33,34 +33,37 @@ export function PathFinder() {
   };
 
   return (
-    <div className="p-6">
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold text-app-text">Find Path</h1>
-        <Link to={`/tree/${dbId}`} className="text-app-accent hover:underline">
+    <div className="p-3 sm:p-4 md:p-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4 md:mb-6">
+        <h1 className="text-xl sm:text-2xl font-bold text-app-text">Find Path</h1>
+        <Link
+          to={`/tree/${dbId}`}
+          className="px-3 py-2 min-h-[40px] flex items-center text-sm text-app-accent hover:underline self-start sm:self-auto"
+        >
           Back to tree
         </Link>
       </div>
 
-      <div className="bg-app-card rounded-lg border border-app-border p-4 mb-6">
-        <div className="grid gap-4 md:grid-cols-4">
+      <div className="bg-app-card rounded-lg border border-app-border p-3 sm:p-4 mb-4 md:mb-6">
+        <div className="grid gap-3 sm:gap-4 sm:grid-cols-2 md:grid-cols-4">
           <input
             type="text"
             placeholder="Source ID (e.g., 9H8F-V2S)"
             value={source}
             onChange={e => setSource(e.target.value.toUpperCase())}
-            className="px-3 py-2 border rounded-md"
+            className="px-3 py-2 min-h-[40px] border rounded-md"
           />
           <input
             type="text"
             placeholder="Target ID (e.g., L163-DR5)"
             value={target}
             onChange={e => setTarget(e.target.value.toUpperCase())}
-            className="px-3 py-2 border rounded-md"
+            className="px-3 py-2 min-h-[40px] border rounded-md"
           />
           <select
             value={method}
             onChange={e => setMethod(e.target.value as 'shortest' | 'longest' | 'random')}
-            className="px-3 py-2 border rounded-md"
+            className="px-3 py-2 min-h-[40px] border rounded-md"
           >
             <option value="shortest">Shortest Path</option>
             <option value="longest">Longest Path</option>
@@ -69,7 +72,7 @@ export function PathFinder() {
           <button
             onClick={handleFindPath}
             disabled={loading || !source || !target}
-            className="px-4 py-2 bg-app-accent text-app-text rounded-md hover:bg-app-accent-hover disabled:opacity-50"
+            className="px-4 py-2 min-h-[40px] bg-app-accent text-app-text rounded-md hover:bg-app-accent-hover disabled:opacity-50"
           >
             {loading ? 'Finding...' : 'Find Path'}
           </button>
@@ -77,14 +80,14 @@ export function PathFinder() {
       </div>
 
       {error && (
-        <div className="bg-app-error/10 border border-app-error/30 text-app-error p-4 rounded-lg mb-6">
+        <div className="bg-app-error/10 border border-app-error/30 text-app-error p-3 sm:p-4 rounded-lg mb-4 md:mb-6 text-sm break-words">
           {error}
         </div>
       )}
 
       {result && (
-        <div className="bg-app-card rounded-lg border border-app-border p-4">
-          <h2 className="text-lg font-semibold mb-4 text-app-text">
+        <div className="bg-app-card rounded-lg border border-app-border p-3 sm:p-4">
+          <h2 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4 text-app-text">
             Path Found: {result.length} generations ({result.method} path)
           </h2>
 
@@ -92,22 +95,22 @@ export function PathFinder() {
             {result.path.map((person, index) => (
               <div
                 key={person.id}
-                className="flex items-center gap-4 p-3 bg-app-bg rounded"
+                className="flex items-center gap-2 sm:gap-4 p-2 sm:p-3 bg-app-bg rounded min-w-0"
               >
-                <span className="w-8 h-8 flex items-center justify-center bg-app-accent/20 text-app-accent rounded-full text-sm font-medium">
+                <span className="w-8 h-8 flex items-center justify-center bg-app-accent/20 text-app-accent rounded-full text-sm font-medium flex-shrink-0">
                   {index}
                 </span>
-                <div className="flex-1">
+                <div className="flex-1 min-w-0">
                   <Link
                     to={`/person/${dbId}/${person.id}`}
-                    className="font-medium text-app-accent hover:underline"
+                    className="font-medium text-app-accent hover:underline break-words"
                   >
                     {person.name}
                   </Link>
                   {person.externalId && (
-                    <span className="text-app-text-subtle ml-2">({person.externalId})</span>
+                    <span className="text-app-text-subtle ml-2 text-xs sm:text-sm">({person.externalId})</span>
                   )}
-                  <p className="text-sm text-app-text-muted">
+                  <p className="text-xs sm:text-sm text-app-text-muted break-words">
                     {person.lifespan}
                     {person.location && ` • ${person.location}`}
                   </p>
diff --git a/client/src/components/search/SearchPage.tsx b/client/src/components/search/SearchPage.tsx
index 5f7a4ab..0574693 100644
--- a/client/src/components/search/SearchPage.tsx
+++ b/client/src/components/search/SearchPage.tsx
@@ -119,32 +119,35 @@ export function SearchPage() {
   const hasActiveFilters = birthAfter || birthBefore || generationMin || generationMax || hasPhoto || hasBio;
 
   return (
-    <div className="p-6">
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold text-app-text">Search</h1>
-        <div className="flex items-center gap-3">
+    <div className="p-3 sm:p-4 md:p-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4 md:mb-6">
+        <h1 className="text-xl sm:text-2xl font-bold text-app-text">Search</h1>
+        <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
           <button
             onClick={() => setShowAiModal(true)}
-            className="flex items-center gap-2 px-3 py-1.5 bg-app-accent/10 text-app-accent border border-app-accent/30 rounded-md hover:bg-app-accent/20 transition-colors"
+            className="flex items-center gap-2 px-3 py-2 min-h-[40px] text-sm bg-app-accent/10 text-app-accent border border-app-accent/30 rounded-md hover:bg-app-accent/20 transition-colors"
           >
             <Sparkles size={16} />
             AI Discovery
           </button>
-          <Link to={`/tree/${dbId}`} className="text-app-accent hover:underline">
+          <Link
+            to={`/tree/${dbId}`}
+            className="px-3 py-2 min-h-[40px] flex items-center text-sm text-app-accent hover:underline"
+          >
             Back to tree
           </Link>
         </div>
       </div>
 
-      <div className="bg-app-card rounded-lg border border-app-border p-4 mb-6">
+      <div className="bg-app-card rounded-lg border border-app-border p-3 sm:p-4 mb-4 md:mb-6">
         {/* Main search row */}
-        <div className="grid gap-4 md:grid-cols-4">
+        <div className="grid gap-3 sm:gap-4 sm:grid-cols-2 md:grid-cols-4">
           <input
             type="text"
             placeholder="Name, bio, or occupation..."
             value={query}
             onChange={e => setQuery(e.target.value)}
-            className="px-3 py-2 border border-app-border rounded-md bg-app-bg text-app-text"
+            className="px-3 py-2 min-h-[40px] border border-app-border rounded-md bg-app-bg text-app-text"
             onKeyDown={handleKeyDown}
           />
           <input
@@ -152,7 +155,7 @@ export function SearchPage() {
             placeholder="Location..."
             value={location}
             onChange={e => setLocation(e.target.value)}
-            className="px-3 py-2 border border-app-border rounded-md bg-app-bg text-app-text"
+            className="px-3 py-2 min-h-[40px] border border-app-border rounded-md bg-app-bg text-app-text"
             onKeyDown={handleKeyDown}
           />
           <input
@@ -160,13 +163,13 @@ export function SearchPage() {
             placeholder="Occupation..."
             value={occupation}
             onChange={e => setOccupation(e.target.value)}
-            className="px-3 py-2 border border-app-border rounded-md bg-app-bg text-app-text"
+            className="px-3 py-2 min-h-[40px] border border-app-border rounded-md bg-app-bg text-app-text"
             onKeyDown={handleKeyDown}
           />
           <button
             onClick={() => handleSearch()}
             disabled={loading}
-            className="px-4 py-2 bg-app-accent text-white rounded-md hover:bg-app-accent-hover disabled:opacity-50"
+            className="px-4 py-2 min-h-[40px] bg-app-accent text-white rounded-md hover:bg-app-accent-hover disabled:opacity-50"
           >
             {loading ? 'Searching...' : 'Search'}
           </button>
@@ -175,7 +178,7 @@ export function SearchPage() {
         {/* Advanced filters toggle */}
         <button
           onClick={() => setShowAdvanced(!showAdvanced)}
-          className="flex items-center gap-1 mt-3 text-sm text-app-text-muted hover:text-app-text transition-colors"
+          className="flex items-center gap-1 mt-3 min-h-[40px] text-sm text-app-text-muted hover:text-app-text transition-colors"
         >
           {showAdvanced ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
           Advanced Filters
@@ -185,7 +188,7 @@ export function SearchPage() {
         {/* Advanced filters panel */}
         {showAdvanced && (
           <div className="mt-4 pt-4 border-t border-app-border">
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div className="grid gap-3 sm:gap-4 sm:grid-cols-2 lg:grid-cols-4">
               {/* Birth year range */}
               <div>
                 <label className="block text-xs text-app-text-muted mb-1">Birth Year Range</label>
@@ -288,8 +291,8 @@ export function SearchPage() {
           </p>
 
           {results.length > 0 ? (
-            <div className="bg-app-card rounded-lg border border-app-border overflow-hidden">
-              <table className="w-full">
+            <div className="bg-app-card rounded-lg border border-app-border overflow-x-auto">
+              <table className="w-full min-w-[640px]">
                 <thead className="bg-app-bg">
                   <tr>
                     <th
@@ -354,21 +357,21 @@ export function SearchPage() {
           )}
 
           {total > 50 && (
-            <div className="flex justify-center gap-2 mt-4">
+            <div className="flex justify-center items-center gap-2 mt-4">
               <button
                 onClick={() => handleSearch(page - 1)}
                 disabled={page === 1 || loading}
-                className="px-3 py-1 border border-app-border rounded text-app-text-secondary disabled:opacity-50 hover:bg-app-border"
+                className="px-3 py-2 min-h-[40px] border border-app-border rounded text-app-text-secondary disabled:opacity-50 hover:bg-app-border"
               >
                 Previous
               </button>
-              <span className="px-3 py-1 text-app-text-muted">
+              <span className="px-3 py-2 min-h-[40px] flex items-center text-app-text-muted text-sm whitespace-nowrap">
                 Page {page} of {Math.ceil(total / 50)}
               </span>
               <button
                 onClick={() => handleSearch(page + 1)}
                 disabled={page >= Math.ceil(total / 50) || loading}
-                className="px-3 py-1 border border-app-border rounded text-app-text-secondary disabled:opacity-50 hover:bg-app-border"
+                className="px-3 py-2 min-h-[40px] border border-app-border rounded text-app-text-secondary disabled:opacity-50 hover:bg-app-border"
               >
                 Next
               </button>
diff --git a/client/src/pages/BrowserSettingsPage.tsx b/client/src/pages/BrowserSettingsPage.tsx
index a262095..0e7c10d 100644
--- a/client/src/pages/BrowserSettingsPage.tsx
+++ b/client/src/pages/BrowserSettingsPage.tsx
@@ -115,7 +115,7 @@ export function BrowserSettingsPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-4 md:space-y-6 p-3 sm:p-4 md:p-6">
       {/* Header */}
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2 sm:gap-3 min-w-0">
@@ -124,15 +124,16 @@ export function BrowserSettingsPage() {
         </div>
         <button
           onClick={loadStatus}
-          className="p-2 text-app-text-muted hover:text-app-text hover:bg-app-border rounded transition-colors shrink-0"
+          className="min-h-[40px] min-w-[40px] flex items-center justify-center text-app-text-muted hover:text-app-text hover:bg-app-border rounded transition-colors shrink-0"
           title="Refresh status"
+          aria-label="Refresh status"
         >
           <RefreshCw size={18} />
         </button>
       </div>
 
       {/* Connection Status Card */}
-      <div className="bg-app-card border border-app-border rounded-lg p-4 sm:p-6">
+      <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4 md:p-6">
         <h2 className="text-base sm:text-lg font-semibold text-app-text mb-4 flex items-center gap-2">
           <Terminal size={18} className="shrink-0" />
           CDP Connection
@@ -195,7 +196,7 @@ export function BrowserSettingsPage() {
               <button
                 onClick={handleLaunch}
                 disabled={launching}
-                className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-app-success-subtle text-app-success rounded-lg hover:bg-app-success/20 transition-colors disabled:opacity-50"
+                className="w-full flex items-center justify-center gap-2 px-4 py-2 min-h-[40px] bg-app-success-subtle text-app-success rounded-lg hover:bg-app-success/20 transition-colors disabled:opacity-50"
               >
                 {launching ? (
                   <Loader2 size={18} className="animate-spin" />
@@ -211,7 +212,7 @@ export function BrowserSettingsPage() {
               <button
                 onClick={handleConnect}
                 disabled={connecting}
-                className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-app-accent/20 text-app-accent rounded-lg hover:bg-app-accent/30 transition-colors disabled:opacity-50"
+                className="w-full flex items-center justify-center gap-2 px-4 py-2 min-h-[40px] bg-app-accent/20 text-app-accent rounded-lg hover:bg-app-accent/30 transition-colors disabled:opacity-50"
               >
                 {connecting ? (
                   <Loader2 size={18} className="animate-spin" />
@@ -226,7 +227,7 @@ export function BrowserSettingsPage() {
               <button
                 onClick={handleDisconnect}
                 disabled={disconnecting}
-                className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-app-error-subtle text-app-error rounded-lg hover:bg-app-error/20 transition-colors disabled:opacity-50"
+                className="w-full flex items-center justify-center gap-2 px-4 py-2 min-h-[40px] bg-app-error-subtle text-app-error rounded-lg hover:bg-app-error/20 transition-colors disabled:opacity-50"
               >
                 {disconnecting ? (
                   <Loader2 size={18} className="animate-spin" />
@@ -241,7 +242,7 @@ export function BrowserSettingsPage() {
       </div>
 
       {/* CDP Configuration Card */}
-      <div className="bg-app-card border border-app-border rounded-lg p-4 sm:p-6">
+      <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4 md:p-6">
         <h2 className="text-base sm:text-lg font-semibold text-app-text mb-4 flex items-center gap-2">
           <Settings size={18} className="shrink-0" />
           CDP Configuration
@@ -260,13 +261,13 @@ export function BrowserSettingsPage() {
                   type="number"
                   value={portValue}
                   onChange={(e) => setPortValue(e.target.value)}
-                  className="w-20 sm:w-24 px-2 sm:px-3 py-1.5 bg-app-bg border border-app-border rounded text-app-text text-sm focus:outline-none focus:border-app-accent"
+                  className="w-20 sm:w-24 px-2 sm:px-3 py-2 min-h-[40px] bg-app-bg border border-app-border rounded text-app-text text-sm focus:outline-none focus:border-app-accent"
                   min="1024"
                   max="65535"
                 />
                 <button
                   onClick={handleUpdatePort}
-                  className="px-2 sm:px-3 py-1.5 bg-app-accent/20 text-app-accent rounded text-sm hover:bg-app-accent/30"
+                  className="px-3 py-2 min-h-[40px] bg-app-accent/20 text-app-accent rounded text-sm hover:bg-app-accent/30"
                 >
                   Save
                 </button>
@@ -275,7 +276,7 @@ export function BrowserSettingsPage() {
                     setEditingPort(false);
                     setPortValue(String(browserConfig?.cdpPort || 9920));
                   }}
-                  className="px-2 sm:px-3 py-1.5 bg-app-border text-app-text-muted rounded text-sm hover:bg-app-hover"
+                  className="px-3 py-2 min-h-[40px] bg-app-border text-app-text-muted rounded text-sm hover:bg-app-hover"
                 >
                   Cancel
                 </button>
@@ -285,7 +286,7 @@ export function BrowserSettingsPage() {
                 <span className="text-app-text font-mono text-sm sm:text-base">{browserConfig?.cdpPort || 9920}</span>
                 <button
                   onClick={() => setEditingPort(true)}
-                  className="text-sm text-app-accent hover:underline"
+                  className="text-sm text-app-accent hover:underline px-2 py-1 min-h-[32px]"
                 >
                   Edit
                 </button>
@@ -310,7 +311,7 @@ export function BrowserSettingsPage() {
             </div>
             <button
               onClick={handleToggleAutoConnect}
-              className={`px-2 sm:px-3 py-1.5 rounded text-sm transition-colors shrink-0 ${
+              className={`px-3 py-2 min-h-[40px] rounded text-sm transition-colors shrink-0 ${
                 browserConfig?.autoConnect
                   ? 'bg-app-success-subtle text-app-success hover:bg-app-success/20'
                   : 'bg-app-hover text-app-text-muted hover:bg-app-border'
@@ -334,7 +335,7 @@ export function BrowserSettingsPage() {
 
       {/* Open Pages Card */}
       {browserStatus?.connected && browserStatus.pages.length > 0 && (
-        <div className="bg-app-card border border-app-border rounded-lg p-4 sm:p-6">
+        <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4 md:p-6">
           <h2 className="text-base sm:text-lg font-semibold text-app-text mb-4 flex items-center gap-2">
             <Globe size={18} className="shrink-0" />
             Open Browser Pages
diff --git a/client/src/pages/GedcomPage.tsx b/client/src/pages/GedcomPage.tsx
index 66181c7..f4428e4 100644
--- a/client/src/pages/GedcomPage.tsx
+++ b/client/src/pages/GedcomPage.tsx
@@ -160,15 +160,15 @@ export function GedcomPage() {
   };
 
   return (
-    <div className="max-w-4xl p-6">
+    <div className="max-w-4xl p-3 sm:p-4 md:p-6">
       {/* Header */}
-      <div className="flex items-center gap-3 mb-6">
-        <FileText size={24} className="text-app-accent" />
-        <h1 className="text-2xl font-bold text-app-text">GEDCOM Import/Export</h1>
+      <div className="flex items-center gap-3 mb-4 md:mb-6">
+        <FileText size={24} className="text-app-accent flex-shrink-0" />
+        <h1 className="text-xl sm:text-2xl font-bold text-app-text">GEDCOM Import/Export</h1>
       </div>
 
       {/* Info */}
-      <div className="bg-app-card border border-app-border rounded-lg p-4 mb-6">
+      <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4 mb-4 md:mb-6">
         <p className="text-app-text-muted text-sm">
           GEDCOM (GEnealogical Data COMmunication) is a standard format for exchanging genealogical data
           between different software and services. Use this page to import family trees from other programs
@@ -176,10 +176,10 @@ export function GedcomPage() {
         </p>
       </div>
 
-      <div className="grid grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4 md:gap-6">
         {/* Import Section */}
-        <div className="bg-app-card border border-app-border rounded-lg p-5">
-          <h2 className="text-lg font-semibold text-app-text mb-4 flex items-center gap-2">
+        <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4 md:p-5">
+          <h2 className="text-base sm:text-lg font-semibold text-app-text mb-4 flex items-center gap-2">
             <Upload size={18} />
             Import GEDCOM
           </h2>
@@ -273,7 +273,7 @@ export function GedcomPage() {
                 value={importName}
                 onChange={e => setImportName(e.target.value)}
                 placeholder="my-family-tree"
-                className="w-full px-3 py-2 bg-app-bg border border-app-border rounded text-app-text placeholder-app-placeholder focus:border-app-accent focus:outline-none"
+                className="w-full px-3 py-2 min-h-[40px] bg-app-bg border border-app-border rounded text-app-text placeholder-app-placeholder focus:border-app-accent focus:outline-none"
               />
               <p className="text-xs text-app-text-subtle mt-1">
                 Will be saved as db-{importName.toLowerCase().replace(/[^a-z0-9]/g, '-') || '...'}.json
@@ -285,7 +285,7 @@ export function GedcomPage() {
           <button
             onClick={handleImport}
             disabled={importing || !validation?.valid || !importName.trim()}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-app-accent text-app-text rounded hover:bg-app-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 min-h-[40px] bg-app-accent text-app-text rounded hover:bg-app-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {importing ? (
               <>
@@ -302,8 +302,8 @@ export function GedcomPage() {
         </div>
 
         {/* Export Section */}
-        <div className="bg-app-card border border-app-border rounded-lg p-5">
-          <h2 className="text-lg font-semibold text-app-text mb-4 flex items-center gap-2">
+        <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4 md:p-5">
+          <h2 className="text-base sm:text-lg font-semibold text-app-text mb-4 flex items-center gap-2">
             <Download size={18} />
             Export GEDCOM
           </h2>
@@ -315,7 +315,7 @@ export function GedcomPage() {
               value={selectedDbForExport}
               onChange={e => setSelectedDbForExport(e.target.value)}
               onFocus={loadDatabases}
-              className="w-full px-3 py-2 bg-app-bg border border-app-border rounded text-app-text focus:border-app-accent focus:outline-none"
+              className="w-full px-3 py-2 min-h-[40px] bg-app-bg border border-app-border rounded text-app-text focus:border-app-accent focus:outline-none"
             >
               <option value="">Select a database...</option>
               {loadingDatabases ? (
@@ -348,7 +348,7 @@ export function GedcomPage() {
           <button
             onClick={handleExport}
             disabled={exporting || !selectedDbForExport}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-app-accent text-app-text rounded hover:bg-app-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 min-h-[40px] bg-app-accent text-app-text rounded hover:bg-app-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {exporting ? (
               <>
diff --git a/client/src/pages/GenealogyProviders.tsx b/client/src/pages/GenealogyProviders.tsx
index 4a46130..b433c9e 100644
--- a/client/src/pages/GenealogyProviders.tsx
+++ b/client/src/pages/GenealogyProviders.tsx
@@ -218,20 +218,20 @@ export function GenealogyProvidersPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-4 md:space-y-6 p-3 sm:p-4 md:p-6">
       {/* Header with Browser Status */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div className="flex items-center gap-3">
-          <Database size={24} className="text-app-accent" />
-          <div>
-            <h1 className="text-2xl font-bold text-app-text">Genealogy Providers</h1>
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3 sm:gap-4">
+        <div className="flex items-center gap-3 min-w-0">
+          <Database size={24} className="text-app-accent flex-shrink-0" />
+          <div className="min-w-0">
+            <h1 className="text-xl sm:text-2xl font-bold text-app-text">Genealogy Providers</h1>
             <p className="text-sm text-app-text-muted">Manage connections to family tree services</p>
           </div>
         </div>
 
         {/* Browser Status Banner */}
-        <div className="flex items-center gap-3">
-          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg ${
+        <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
+          <div className={`flex items-center gap-2 px-3 py-2 min-h-[40px] rounded-lg ${
             browserStatus?.connected
               ? 'bg-app-success-subtle text-app-success'
               : 'bg-app-warning-subtle text-app-warning'
@@ -247,7 +247,7 @@ export function GenealogyProvidersPage() {
             <button
               onClick={handleLaunch}
               disabled={launching}
-              className="flex items-center gap-1.5 px-3 py-1.5 bg-app-success-subtle text-app-success rounded-lg hover:bg-app-success/20 transition-colors disabled:opacity-50 text-sm"
+              className="flex items-center gap-1.5 px-3 py-2 min-h-[40px] bg-app-success-subtle text-app-success rounded-lg hover:bg-app-success/20 transition-colors disabled:opacity-50 text-sm"
             >
               {launching ? <Loader2 size={14} className="animate-spin" /> : <Play size={14} />}
               Launch
@@ -258,7 +258,7 @@ export function GenealogyProvidersPage() {
             <button
               onClick={handleConnect}
               disabled={connecting}
-              className="flex items-center gap-1.5 px-3 py-1.5 bg-app-accent/20 text-app-accent rounded-lg hover:bg-app-accent/30 transition-colors disabled:opacity-50 text-sm"
+              className="flex items-center gap-1.5 px-3 py-2 min-h-[40px] bg-app-accent/20 text-app-accent rounded-lg hover:bg-app-accent/30 transition-colors disabled:opacity-50 text-sm"
             >
               {connecting ? <Loader2 size={14} className="animate-spin" /> : <Power size={14} />}
               Connect
@@ -269,7 +269,7 @@ export function GenealogyProvidersPage() {
             <button
               onClick={handleDisconnect}
               disabled={disconnecting}
-              className="flex items-center gap-1.5 px-3 py-1.5 bg-app-border text-app-text-secondary rounded-lg hover:bg-app-hover transition-colors disabled:opacity-50 text-sm"
+              className="flex items-center gap-1.5 px-3 py-2 min-h-[40px] bg-app-border text-app-text-secondary rounded-lg hover:bg-app-hover transition-colors disabled:opacity-50 text-sm"
             >
               {disconnecting ? <Loader2 size={14} className="animate-spin" /> : <PowerOff size={14} />}
               Disconnect
@@ -278,8 +278,9 @@ export function GenealogyProvidersPage() {
 
           <button
             onClick={loadStatus}
-            className="p-2 text-app-text-muted hover:text-app-text hover:bg-app-border rounded transition-colors"
+            className="min-h-[40px] min-w-[40px] flex items-center justify-center text-app-text-muted hover:text-app-text hover:bg-app-border rounded transition-colors"
             title="Refresh"
+            aria-label="Refresh"
           >
             <RefreshCw size={18} />
           </button>
@@ -287,14 +288,14 @@ export function GenealogyProvidersPage() {
       </div>
 
       {/* Browser Settings Link */}
-      <div className="bg-app-card border border-app-border rounded-lg p-4">
-        <div className="flex items-center justify-between">
+      <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
           <p className="text-sm text-app-text-muted">
             For advanced browser automation settings (CDP port, auto-connect), visit Browser Settings.
           </p>
           <Link
             to="/settings/browser"
-            className="flex items-center gap-1.5 px-3 py-1.5 text-app-accent hover:bg-app-accent/10 rounded-lg transition-colors text-sm"
+            className="flex items-center gap-1.5 px-3 py-2 min-h-[40px] text-app-accent hover:bg-app-accent/10 rounded-lg transition-colors text-sm self-start sm:self-auto"
           >
             <ExternalLink size={14} />
             Browser Settings
@@ -320,11 +321,11 @@ export function GenealogyProvidersPage() {
               className={`bg-app-card rounded-lg border transition-colors ${colors.border}`}
             >
               {/* Provider Header */}
-              <div className="p-5 border-b border-app-border/50">
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+              <div className="p-3 sm:p-4 md:p-5 border-b border-app-border/50">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
                   {/* Provider Badge + Status */}
-                  <div className="flex items-center gap-4">
-                    <div className={`px-4 py-2 rounded-lg ${colors.bg} ${colors.text} font-semibold text-lg`}>
+                  <div className="flex flex-wrap items-center gap-2 sm:gap-4">
+                    <div className={`px-3 sm:px-4 py-2 rounded-lg ${colors.bg} ${colors.text} font-semibold text-base sm:text-lg`}>
                       {displayName}
                     </div>
 
@@ -354,7 +355,7 @@ export function GenealogyProvidersPage() {
                   <button
                     onClick={() => handleCheckSession(provider)}
                     disabled={isCheckingThis || !browserStatus?.connected}
-                    className="flex items-center gap-1.5 px-3 py-1.5 bg-app-border text-app-text-secondary rounded-lg hover:bg-app-hover transition-colors disabled:opacity-50 text-sm"
+                    className="flex items-center gap-1.5 px-3 py-2 min-h-[40px] bg-app-border text-app-text-secondary rounded-lg hover:bg-app-hover transition-colors disabled:opacity-50 text-sm self-start sm:self-auto"
                     title="Check session status"
                   >
                     {isCheckingThis ? (
@@ -368,13 +369,13 @@ export function GenealogyProvidersPage() {
               </div>
 
               {/* Login Options */}
-              <div className="p-5 space-y-4">
+              <div className="p-3 sm:p-4 md:p-5 space-y-4">
                 {/* Login Buttons */}
-                <div className="flex flex-wrap items-center gap-3">
+                <div className="flex flex-wrap items-center gap-2 sm:gap-3">
                   <button
                     onClick={() => handleOpenLogin(provider)}
                     disabled={isOpeningLoginThis || !browserStatus?.connected}
-                    className="flex items-center gap-2 px-4 py-2 bg-app-accent text-app-text rounded-lg hover:bg-app-accent/80 transition-colors disabled:opacity-50"
+                    className="flex items-center gap-2 px-4 py-2 min-h-[40px] bg-app-accent text-app-text rounded-lg hover:bg-app-accent/80 transition-colors disabled:opacity-50"
                   >
                     {isOpeningLoginThis ? (
                       <Loader2 size={16} className="animate-spin" />
@@ -388,7 +389,7 @@ export function GenealogyProvidersPage() {
                     href={loginUrl}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="flex items-center gap-1.5 px-3 py-1.5 text-app-text-muted hover:text-app-text hover:bg-app-hover rounded-lg transition-colors text-sm"
+                    className="flex items-center gap-1.5 px-3 py-2 min-h-[40px] text-app-text-muted hover:text-app-text hover:bg-app-hover rounded-lg transition-colors text-sm"
                   >
                     <ExternalLink size={14} />
                     Open in Browser
diff --git a/client/src/pages/ReportsPage.tsx b/client/src/pages/ReportsPage.tsx
index ab4f6d8..fdb9efa 100644
--- a/client/src/pages/ReportsPage.tsx
+++ b/client/src/pages/ReportsPage.tsx
@@ -147,7 +147,7 @@ export function ReportsPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-4 md:space-y-6 p-3 sm:p-4 md:p-6">
       {/* Header */}
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2 sm:gap-3 min-w-0">
@@ -156,15 +156,16 @@ export function ReportsPage() {
         </div>
         <button
           onClick={checkReportAvailability}
-          className="p-2 text-app-text-muted hover:text-app-text hover:bg-app-border rounded transition-colors shrink-0"
+          className="min-h-[40px] min-w-[40px] flex items-center justify-center text-app-text-muted hover:text-app-text hover:bg-app-border rounded transition-colors shrink-0"
           title="Refresh status"
+          aria-label="Refresh status"
         >
           <RefreshCw size={18} />
         </button>
       </div>
 
       {/* Reports Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
         {/* Code Coverage Report */}
         <ReportCard
           icon={<FileCode2 size={24} />}
@@ -210,10 +211,10 @@ export function ReportsPage() {
 
       {/* Test Run Status */}
       {testRun && (
-        <div className="bg-app-card border border-app-border rounded-lg p-4">
-          <div className="flex items-center justify-between mb-3">
-            <div className="flex items-center gap-3">
-              <span className={`w-3 h-3 rounded-full ${
+        <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4">
+          <div className="flex flex-wrap items-center justify-between gap-2 mb-3">
+            <div className="flex flex-wrap items-center gap-2 sm:gap-3 min-w-0">
+              <span className={`w-3 h-3 rounded-full flex-shrink-0 ${
                 testRun.status === 'running' ? 'bg-app-accent animate-pulse' :
                 testRun.status === 'completed' ? 'bg-app-success' :
                 testRun.status === 'failed' ? 'bg-app-error' : 'bg-app-warning'
@@ -233,7 +234,7 @@ export function ReportsPage() {
             {isRunning && (
               <button
                 onClick={handleStopTests}
-                className="flex items-center gap-2 px-3 py-1.5 bg-app-error/20 text-app-error rounded hover:bg-app-error/30 transition-colors"
+                className="flex items-center gap-2 px-3 py-2 min-h-[40px] bg-app-error/20 text-app-error rounded hover:bg-app-error/30 transition-colors"
               >
                 <Square size={14} />
                 Stop
@@ -244,7 +245,7 @@ export function ReportsPage() {
       )}
 
       {/* Output Console */}
-      <div className="bg-app-card rounded-lg border border-app-border p-4">
+      <div className="bg-app-card rounded-lg border border-app-border p-3 sm:p-4">
         <div className="flex items-center justify-between mb-3">
           <h2 className="font-semibold text-app-text">Output</h2>
           <div className="flex items-center gap-3">
@@ -252,7 +253,7 @@ export function ReportsPage() {
             {outputLines.length > 0 && (
               <button
                 onClick={() => setOutputLines([])}
-                className="text-xs text-app-text-muted hover:text-app-text"
+                className="text-xs text-app-text-muted hover:text-app-text px-2 py-1 min-h-[32px]"
               >
                 Clear
               </button>
@@ -261,8 +262,7 @@ export function ReportsPage() {
         </div>
         <div
           ref={outputRef}
-          className="bg-gray-900 rounded-md p-3 overflow-auto font-mono text-xs text-gray-300 whitespace-pre"
-          style={{ height: '400px' }}
+          className="bg-gray-900 rounded-md p-2 sm:p-3 overflow-auto font-mono text-[10px] sm:text-xs text-gray-300 whitespace-pre h-[260px] sm:h-[320px] md:h-[400px]"
         >
           {outputLines.length === 0 ? (
             <span className="text-gray-500 italic">Output will appear here when tests run...</span>
@@ -275,7 +275,7 @@ export function ReportsPage() {
       </div>
 
       {/* Report Status Summary */}
-      <div className="bg-app-card border border-app-border rounded-lg p-4 sm:p-6">
+      <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4 md:p-6">
         <h2 className="text-base sm:text-lg font-semibold text-app-text mb-4">Report Status</h2>
         <div className="space-y-2">
           <StatusRow label="Code Coverage" available={status.codeCoverage} path="/code-coverage/" />
@@ -346,7 +346,7 @@ interface ReportCardProps {
 
 function ReportCard({ icon, title, description, available, url, testType, isRunning, isAnyRunning, onRun, onOpen }: ReportCardProps) {
   return (
-    <div className="bg-app-card border border-app-border rounded-lg p-4 sm:p-6 flex flex-col">
+    <div className="bg-app-card border border-app-border rounded-lg p-3 sm:p-4 md:p-6 flex flex-col">
       <div className="flex items-center gap-3 mb-3">
         <div className={`${available ? 'text-app-accent' : 'text-app-text-subtle'}`}>
           {icon}
@@ -361,7 +361,7 @@ function ReportCard({ icon, title, description, available, url, testType, isRunn
         <button
           onClick={() => onRun(testType)}
           disabled={isAnyRunning}
-          className={`w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg transition-colors ${
+          className={`w-full flex items-center justify-center gap-2 px-4 py-2 min-h-[40px] rounded-lg transition-colors ${
             isRunning
               ? 'bg-app-accent text-app-text'
               : isAnyRunning
@@ -386,13 +386,13 @@ function ReportCard({ icon, title, description, available, url, testType, isRunn
         {available ? (
           <button
             onClick={() => onOpen(url)}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-app-border text-app-text-secondary rounded-lg hover:bg-app-hover transition-colors"
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 min-h-[40px] bg-app-border text-app-text-secondary rounded-lg hover:bg-app-hover transition-colors"
           >
             <ExternalLink size={16} />
             View Report
           </button>
         ) : (
-          <div className="flex items-center justify-center gap-2 text-app-text-muted text-sm py-2">
+          <div className="flex items-center justify-center gap-2 text-app-text-muted text-sm py-2 min-h-[40px]">
             <XCircle size={16} className="text-app-warning" />
             Report not generated yet
           </div>

From b2f73d1757f7740d5e62101091e7821a5016942d Mon Sep 17 00:00:00 2001
From: Adam Eivy <atomantic@gmail.com>
Date: Mon, 4 May 2026 13:14:08 -0700
Subject: [PATCH 2/2] fix(ui): address PR #91 review feedback

- Fix overflow-x-auto on SearchPage table wrapper losing rounded corners (wrap table in inner overflow-x-auto div, keep outer overflow-hidden)
- Bump Clear button (ReportsPage) and Edit button (BrowserSettingsPage) to min-h-[40px] for consistent touch targets
---
 client/src/components/search/SearchPage.tsx | 4 +++-
 client/src/pages/BrowserSettingsPage.tsx    | 2 +-
 client/src/pages/ReportsPage.tsx            | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/search/SearchPage.tsx b/client/src/components/search/SearchPage.tsx
index 0574693..10bfba4 100644
--- a/client/src/components/search/SearchPage.tsx
+++ b/client/src/components/search/SearchPage.tsx
@@ -291,7 +291,8 @@ export function SearchPage() {
           </p>
 
           {results.length > 0 ? (
-            <div className="bg-app-card rounded-lg border border-app-border overflow-x-auto">
+            <div className="bg-app-card rounded-lg border border-app-border overflow-hidden">
+              <div className="overflow-x-auto">
               <table className="w-full min-w-[640px]">
                 <thead className="bg-app-bg">
                   <tr>
@@ -351,6 +352,7 @@ export function SearchPage() {
                   ))}
                 </tbody>
               </table>
+              </div>
             </div>
           ) : (
             <p className="text-app-text-subtle text-center py-8">No results found</p>
diff --git a/client/src/pages/BrowserSettingsPage.tsx b/client/src/pages/BrowserSettingsPage.tsx
index 0e7c10d..7c66463 100644
--- a/client/src/pages/BrowserSettingsPage.tsx
+++ b/client/src/pages/BrowserSettingsPage.tsx
@@ -286,7 +286,7 @@ export function BrowserSettingsPage() {
                 <span className="text-app-text font-mono text-sm sm:text-base">{browserConfig?.cdpPort || 9920}</span>
                 <button
                   onClick={() => setEditingPort(true)}
-                  className="text-sm text-app-accent hover:underline px-2 py-1 min-h-[32px]"
+                  className="text-sm text-app-accent hover:underline px-2 py-1 min-h-[40px]"
                 >
                   Edit
                 </button>
diff --git a/client/src/pages/ReportsPage.tsx b/client/src/pages/ReportsPage.tsx
index fdb9efa..417f8b9 100644
--- a/client/src/pages/ReportsPage.tsx
+++ b/client/src/pages/ReportsPage.tsx
@@ -253,7 +253,7 @@ export function ReportsPage() {
             {outputLines.length > 0 && (
               <button
                 onClick={() => setOutputLines([])}
-                className="text-xs text-app-text-muted hover:text-app-text px-2 py-1 min-h-[32px]"
+                className="text-xs text-app-text-muted hover:text-app-text px-2 py-1 min-h-[40px]"
               >
                 Clear
               </button>