From cc0f4665973eef678852b445d458612c64c33a4c Mon Sep 17 00:00:00 2001
From: Virginia Dooley <7017118+VirginiaDooley@users.noreply.github.com>
Date: Thu, 13 Nov 2025 09:40:36 +0000
Subject: [PATCH 1/6] Optimise nav for mobile

---
 app/views/dashboard/_address_search.html.erb  | 40 ++++++++-----------
 app/views/dashboard/_home.html.erb            | 14 +++----
 app/views/dashboard/_progress_map.html.erb    | 32 +++++++--------
 app/views/dashboard/index.html.erb            | 10 ++---
 app/views/layouts/application.html.erb        | 27 +++++++------
 .../_representatives_table.html.erb           | 36 ++++++++---------
 6 files changed, 78 insertions(+), 81 deletions(-)

diff --git a/app/views/dashboard/_address_search.html.erb b/app/views/dashboard/_address_search.html.erb
index 7fe93869..b4c74545 100644
--- a/app/views/dashboard/_address_search.html.erb
+++ b/app/views/dashboard/_address_search.html.erb
@@ -1,28 +1,22 @@
 <turbo-frame id="main-panel">
-<div class="w-full px-4 py-6">
-    <script src="/assets/tabs.js"></script>
-    <div class="flex justify-center mx-auto">
-        <div class="w-full">
-            <div class="bg-gray-50 rounded-lg h-fit mx-4 my-6 shadow-sm">
-                <div class="p-6">
-                    <%= form_with url: dashboard_panel_path('address_search'), method: :post, data: { turbo_frame: 'main-panel' }, html: { class: "space-y-4" } do |form| %>
-                        <div class="relative">
-                            <%= form.label :address, "Enter your address", class: "block text-sm font-medium text-gray-700 mb-1" %>
-                            <%= form.text_field :address, placeholder: "e.g., 123 Main St, City, State, Zip Code", class: "w-full py-3 px-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", autocomplete: "off" %>
-                        </div>
-                        <div class="flex justify-center w-full">
-                            <%= form.submit "Find My Representatives", class: "w-full sm:w-auto bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 border border-blue-700 rounded-lg text-lg" %>
-                        </div>
-                    <% end %>
+    <div class="w-full px-3 py-3 sm:px-4 sm:py-4">
+        <div class="bg-gray-50 rounded-lg shadow-sm max-w-xl mx-auto p-3 sm:p-6">
+            <%= form_with url: dashboard_panel_path('address_search'), method: :post, data: { turbo_frame: 'main-panel' }, html: { class: "space-y-3 sm:space-y-4" } do |form| %>
+                <div class="relative">
+                    <%= form.label :address, "Enter your address", class: "block text-xs sm:text-sm font-medium text-gray-700 mb-1" %>
+                    <%= form.text_field :address, placeholder: "123 Main St, City, State, Zip", class: "w-full py-2.5 sm:py-3 px-3 sm:px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", autocomplete: "off" %>
+                </div>
+                <div class="flex justify-center w-full mb-3 sm:mb-4">
+                    <%= form.submit "Find My Representatives", class: "inline-flex items-center bg-blue-500 hover:bg-blue-700 text-white font-semibold py-3 sm:py-3.5 px-4 sm:px-5 border border-blue-700 rounded-lg text-sm sm:text-base" %>
+                </div>
+            <% end %>
 
-                    <%# Support both locals and instance variables for Turbo and non-Turbo renders %>
-                    <% reps = (defined?(representatives) ? representatives : @representatives) %>
-                    <% did_search = (defined?(searched) ? searched : @searched) %>
-                    <% if did_search %>
-                        <div class="mt-8 mb-4 px-2">
-                            <%= render partial: 'representatives_table', locals: { representatives: reps } %>
-                        </div>
-                    <% end %>
+            <%# Support both locals and instance variables for Turbo and non-Turbo renders %>
+            <% reps = (defined?(representatives) ? representatives : @representatives) %>
+            <% did_search = (defined?(searched) ? searched : @searched) %>
+            <% if did_search %>
+                <div class="mt-4 sm:mt-6 mb-1 sm:mb-2">
+                    <%= render partial: 'representatives_table', locals: { representatives: reps } %>
                 </div>
                 <div id="search-results" class="w-full px-6 py-4 hidden">
                     <div id="loading-message" class="text-center px-4 py-3 text-gray-500 text-sm hidden">
diff --git a/app/views/dashboard/_home.html.erb b/app/views/dashboard/_home.html.erb
index a8d56575..539f7ff5 100644
--- a/app/views/dashboard/_home.html.erb
+++ b/app/views/dashboard/_home.html.erb
@@ -1,20 +1,20 @@
-<div class="min-h-[600px]">
-  <div class="mb-6">
-    <h3 class="text-lg font-medium text-gray-900 mb-4 mt-4">
+<div class="min-h-[400px] sm:min-h-[600px]">
+  <div class="mb-4 sm:mb-6">
+    <h3 class="text-base sm:text-lg font-medium text-gray-900 mb-3 mt-2 sm:mt-4">
       CivicPatch is an open-source, distributed data collection framework aimed at collecting contact information for local representatives.
     </h3>
-    <h5 class="text-gray-900 mb-4 mt-4">
+    <h5 class="text-sm sm:text-base text-gray-900 mb-2 sm:mb-4 mt-3 sm:mt-4">
       Where is the data stored?
     </h5>
-    <ul>
+    <ul class="space-y-1 text-sm">
       <li><a href="https://github.com/civicpatch/open-data" target="_blank" rel="noopener">https://github.com/civicpatch/open-data</a></li>
       <li><a href="https://github.com/openstates/people" target="_blank" rel="noopener">https://github.com/openstates/people</a></li>
     </ul>
 
-    <h5 class="text-gray-900 mb-4 mt-4">
+    <h5 class="text-sm sm:text-base text-gray-900 mb-2 sm:mb-4 mt-3 sm:mt-4">
       Who can run it?
     </h5>
-    <p>Anyone. Volunteers can deploy CivicPatch servers to collect information. Our roadmap and project planning is open for anyone to view. Check it out <a href="https://github.com/orgs/CivicPatch/projects/3/views/1" target="_blank" rel="noopener">here</a>.</p>
+    <p class="text-sm leading-relaxed">Anyone. Volunteers can deploy CivicPatch servers to collect information. Our roadmap and project planning is open for anyone to view. Check it out <a href="https://github.com/orgs/CivicPatch/projects/3/views/1" target="_blank" rel="noopener">here</a>.</p>
   </div>
 
 
diff --git a/app/views/dashboard/_progress_map.html.erb b/app/views/dashboard/_progress_map.html.erb
index 2f87a008..2f04930f 100644
--- a/app/views/dashboard/_progress_map.html.erb
+++ b/app/views/dashboard/_progress_map.html.erb
@@ -1,32 +1,32 @@
 <div class="max-w-7xl mx-auto">
 
-  <div id="progress-map-container" style="background-color: #f8f9fa; padding: 20px; margin: 20px 0; border-radius: 8px;">
-    <h2 style="color: #333; margin-bottom: 20px;">CivicPatch Municipal Data Collection Progress</h2>
+  <div id="progress-map-container" style="background-color:#f8f9fa;padding:12px 10px;margin:12px 0;border-radius:8px;">
+    <h2 style="color:#333;margin-bottom:12px;font-size:16px;font-weight:600;">CivicPatch Municipal Data Collection Progress</h2>
     
-    <!-- US Map Visualization -->
-    <div id="us-map-container" style="text-align: center; margin-bottom: 30px; max-width: 100%; overflow-x: auto;">
+  <!-- US Map Visualization -->
+  <div id="us-map-container" style="text-align:center;margin-bottom:20px;max-width:100%;overflow-x:auto;">
       <svg id="us-map" viewBox="0 0 960 500" width="100%" height="auto" style="max-width: 100%; height: auto; background-color: white; border-radius: 4px; border: 1px solid #ddd; display: block; margin: 0 auto;"></svg>
       
       <!-- Legend -->
-      <div id="map-legend" style="display: flex; justify-content: center; align-items: center; margin-top: 15px; gap: 15px;">
-        <span style="font-weight: bold; color: #333;">Completion Rate:</span>
-        <div style="display: flex; align-items: center; gap: 5px;">
+      <div id="map-legend" style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:10px;gap:8px;font-size:11px;">
+        <span style="font-weight:bold;color:#333;flex-basis:100%;text-align:center;margin-bottom:2px;">Completion Rate:</span>
+        <div style="display:flex;align-items:center;gap:5px;">
           <div style="width: 20px; height: 15px; background: #2d5016; border-radius: 3px;"></div>
           <span style="font-size: 12px;">70%+</span>
         </div>
-        <div style="display: flex; align-items: center; gap: 5px;">
+  <div style="display:flex;align-items:center;gap:5px;">
           <div style="width: 20px; height: 15px; background: #5a9216; border-radius: 3px;"></div>
           <span style="font-size: 12px;">50-69%</span>
         </div>
-        <div style="display: flex; align-items: center; gap: 5px;">
+  <div style="display:flex;align-items:center;gap:5px;">
           <div style="width: 20px; height: 15px; background: #8eb021; border-radius: 3px;"></div>
           <span style="font-size: 12px;">30-49%</span>
         </div>
-        <div style="display: flex; align-items: center; gap: 5px;">
+  <div style="display:flex;align-items:center;gap:5px;">
           <div style="width: 20px; height: 15px; background: #d4a574; border-radius: 3px;"></div>
           <span style="font-size: 12px;">10-29%</span>
         </div>
-        <div style="display: flex; align-items: center; gap: 5px;">
+  <div style="display:flex;align-items:center;gap:5px;">
           <div style="width: 20px; height: 15px; background: #8b4513; border-radius: 3px;"></div>
           <span style="font-size: 12px;">0-9%</span>
         </div>
@@ -36,8 +36,8 @@
         </div>
       </div>
       
-      <!-- Tooltip -->
-      <div id="map-tooltip" style="position: absolute; padding: 8px 12px; background: rgba(0,0,0,0.8); color: white; border-radius: 4px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s;"></div>
+  <!-- Tooltip -->
+  <div id="map-tooltip" style="position:absolute;padding:6px 10px;background:rgba(0,0,0,0.8);color:white;border-radius:4px;font-size:11px;pointer-events:none;opacity:0;transition:opacity 0.2s;"></div>
     </div>
     
     
@@ -69,10 +69,10 @@
       if (progress >= 10) return '#d4a574';
       if (progress > 0) return '#8b4513';
       return '#e5e5e5';
-    }
     
-    // Check if D3 is available
-    if (typeof d3 === 'undefined') {
+    
+    <div style="margin-top:12px;padding:10px;background:#d1ecf1;border-radius:6px;color:#0c5460;font-size:12px;line-height:1.4;">
+      <strong>Summary:</strong> 7 states tracked  702 of 1,639 municipalities scraped  42.8% average completion
       console.log('D3 not available, showing static visualization only');
       document.getElementById('us-map-container').innerHTML = 
         '<p style="text-align: center; padding: 40px; color: #666;">Interactive map requires D3.js. See detailed progress below.</p>';
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index 055af2ed..55d593e3 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -1,14 +1,14 @@
-<div class="min-h-screen bg-gray-50 p-6 container max-w-6xl mx-auto">
-  <div class="flex flex-col md:flex-row gap-6 mb-8">
-    <div class="order-1 md:order-1 w-full md:w-1/3 bg-white rounded-lg shadow-sm p-6 flex flex-col justify-between">
+<div class="min-h-screen bg-gray-50 px-3 py-4 sm:p-6 container max-w-6xl mx-auto">
+  <div class="flex flex-col md:flex-row gap-4 sm:gap-6 mb-6 sm:mb-8">
+    <div class="order-1 md:order-1 w-full md:w-1/3 bg-white rounded-lg shadow-sm p-4 sm:p-6 flex flex-col justify-between">
       <%= render 'dashboard/home' %>
     </div>
-    <div class="order-3 md:order-2 w-full md:w-2/3 bg-white rounded-lg shadow-sm p-6">
+    <div class="order-3 md:order-2 w-full md:w-2/3 bg-white rounded-lg shadow-sm p-4 sm:p-6">
       <%= render 'dashboard/progress_map' %>
     </div>
   </div>
   <turbo-frame id="main-panel" class="order-2 md:order-3 w-full">
-    <div class="bg-white rounded-lg shadow-sm p-6">
+    <div class="bg-white rounded-lg shadow-sm p-4 sm:p-6">
       <%= render 'dashboard/address_search' %>
     </div>
   </turbo-frame>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index f42f9e17..1487414d 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,19 +14,21 @@
 
     <%= yield :head %>
 
-    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
-    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
-
     <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/favicon/site.webmanifest">
+    <%= tag.link rel: "manifest", href: "/manifest.json" %>
 
-    <%# Includes all stylesheet files in app/assets/stylesheets %>
-    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
-    
-    <%= stylesheet_link_tag "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css", integrity: "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=", crossorigin: "" %>
-  <%= javascript_importmap_tags 'application' %> 
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%= tag.link rel: "stylesheet", href: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css", integrity: "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=", crossorigin: "anonymous" %>
+    <%= javascript_importmap_tags %>
+    <style>
+      @media (max-width: 767px) {
+        #nav-toggle:checked + label + #nav-menu {
+          display: flex !important;
+        }
+      }
+    </style>
   </head>
 
   <body class="min-h-screen bg-gray-50">
@@ -39,8 +41,9 @@
         </div>
       </nav>
     </header>
-    <main class="container max-w-6xl mx-auto min-h-[600px] mt-28 px-5 flex">
+    <main class="container max-w-6xl mx-auto min-h-[600px] px-5 flex">
       <%= yield %>
-    </main>
+    </main> 
   </body>
-</html> 
+</html>
+
diff --git a/app/views/representatives/_representatives_table.html.erb b/app/views/representatives/_representatives_table.html.erb
index 16eb0eb0..fdc92af9 100644
--- a/app/views/representatives/_representatives_table.html.erb
+++ b/app/views/representatives/_representatives_table.html.erb
@@ -1,8 +1,8 @@
 <%# app/views/pages/_representatives_table.html.erb %>
 <% if representatives.present? %>
-  <div class="overflow-x-auto md:overflow-visible border border-gray-200 rounded-lg shadow-sm mb-8">
-    <table class="w-full">
-      <thead>
+  <div class="overflow-x-auto md:overflow-visible border border-gray-200 rounded-lg shadow-sm mb-6 sm:mb-8">
+    <table class="w-full table-auto text-[11px] sm:text-xs md:text-sm">
+      <thead class="hidden md:table-header-group">
         <tr class="bg-gray-50 border-b border-gray-200">
           <th class="w-30 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">Image</th>
           <th class="w-40 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">Name</th>
@@ -15,37 +15,37 @@
         <% representatives.each do |rep_obj| %>
           <% rep = rep_obj.is_a?(Hash) ? rep_obj : rep_obj.respond_to?(:data) ? rep_obj.data : {} %>
           <% initials = rep["name"].to_s.split.size >= 2 ? rep["name"].to_s.split.first[0] + rep["name"].to_s.split.last[0] : rep["name"].to_s[0,2] rescue '??' %>
-          <tr class="block md:table-row border-b-2 border-gray-200 mb-4 md:mb-0 hover:bg-gray-50">
-            <td class="text-center block md:table-cell px-4 py-2 md:px-6 md:py-4 whitespace-nowrap align-center">
+          <tr class="block md:table-row border-b-2 border-gray-200 mb-3 md:mb-0 hover:bg-gray-50">
+            <td class="text-center block md:table-cell px-3 py-2 md:px-6 md:py-4 whitespace-nowrap align-center">
               <% if rep["image"] %>
-                <div class="flex justify-center p-2">
-                  <img src="<%= rep["image"] %>" alt="<%= rep["name"] || 'Representative' %>" class="h-40 w-40 md:h-24 md:w-24 rounded-lg object-cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
-                  <div class="h-40 w-40 md:h-24 md:w-24 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center text-white font-semibold text-lg md:text-sm" style="display:none;"><%= initials %></div>
+                <div class="flex justify-center p-1 sm:p-2">
+                  <img src="<%= rep["image"] %>" alt="<%= rep["name"] || 'Representative' %>" class="h-28 w-28 sm:h-32 sm:w-32 md:h-24 md:w-24 rounded-lg object-cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+                  <div class="h-28 w-28 sm:h-32 sm:w-32 md:h-24 md:w-24 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center text-white font-semibold text-base md:text-sm" style="display:none;"><%= initials %></div>
                 </div>
               <% else %>
-                <div class="flex justify-center p-2"><div class="h-40 w-40 md:h-24 md:w-24 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center text-white font-semibold text-lg md:text-sm"><%= initials %></div></div>
+                <div class="flex justify-center p-1 sm:p-2"><div class="h-28 w-28 sm:h-32 sm:w-32 md:h-24 md:w-24 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center text-white font-semibold text-base md:text-sm"><%= initials %></div></div>
               <% end %>
             </td>
-            <td class="text-center block md:table-cell px-4 py-2 md:px-6 md:py-4 whitespace-nowrap align-center">
-              <div class="text-center font-medium text-gray-900"><%= rep["name"].presence || '-' %></div>
+            <td class="text-center block md:table-cell px-3 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
+              <div class="text-center font-medium text-gray-900 text-[12px] sm:text-sm"><%= rep["name"].presence || '-' %></div>
             </td>
-            <td class="text-center block md:table-cell px-4 py-2 md:px-6 md:py-4 whitespace-nowrap align-center">
+            <td class="text-center block md:table-cell px-3 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
               <% office_text = rep["office"].presence || rep["title"].presence || rep["level"].presence || rep["position"].presence || rep["role"].presence %>
               <% if rep["other_names"].present? && rep["other_names"].is_a?(Array) %>
                 <% names = rep["other_names"].map { |n| n.is_a?(Hash) ? n["name"] : n.to_s }.reject(&:blank?) %>
                 <% if names.size > 0 %>
-                  <div class="text-center">
+                  <div class="text-center text-[11px] sm:text-sm">
                     <div class="font-medium"><%= office_text %></div>
                     <div class="text-gray-600"><%= names.join(", ") %></div>
                   </div>
                 <% else %>
-                  <div class="text-center"><%= office_text %></div>
+                  <div class="text-center text-[11px] sm:text-sm"><%= office_text %></div>
                 <% end %>
               <% else %>
-                <div class="text-center"><%= office_text %></div>
+                <div class="text-center text-[11px] sm:text-sm"><%= office_text %></div>
               <% end %>
             </td>
-            <td class="text-center block md:table-cell px-4 py-2 md:px-6 md:py-4 whitespace-nowrap align-center">
+            <td class="text-center block md:table-cell px-3 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
               <% email = (rep["contact_details"]&.find { |c| c["type"] == 'email' }&.dig("value") rescue nil) || rep["email"] || rep["contact_email"] %>
               <% phone = (rep["contact_details"]&.find { |c| c["type"] == 'phone' }&.dig("value") rescue nil) || rep["phone"] || rep["contact_phone"] %>
               <% if email.present? || phone.present? %>
@@ -61,7 +61,7 @@
                 <div class="text-center">-</div>
               <% end %>
             </td>
-            <td class="text-center block md:table-cell px-4 py-2 md:px-6 md:py-4 whitespace-nowrap align-center">
+            <td class="text-center block md:table-cell px-3 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
               <% all_links = [] %>
               <% website = rep["website"] || rep["url"] || rep["official_website"] %>
               <% if website.present? %>
@@ -102,7 +102,7 @@
       </tbody>
     </table>
   </div>
-  <div class="text-center py-4 text-gray-600 text-sm border-t border-gray-200 mt-4">
+  <div class="text-center py-3 sm:py-4 text-xs sm:text-sm text-gray-600 border-t border-gray-200 mt-3 sm:mt-4">
     ↑ Scroll up to search for a different address
   </div>
 <% else %>

From 9181f91f0e4a875c32d47e072dc0e04f1603236e Mon Sep 17 00:00:00 2001
From: Virginia Dooley <7017118+VirginiaDooley@users.noreply.github.com>
Date: Thu, 13 Nov 2025 09:41:09 +0000
Subject: [PATCH 2/6] Don't commit data files

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 3c2a792f..a10f493f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,4 @@ node_modules
 !/app/assets/builds/.keep
 
 /vendor/bundle
+/data/*
\ No newline at end of file

From b5b11702d910cee3d209d5a75ee3e6f6ef29c6c3 Mon Sep 17 00:00:00 2001
From: Virginia Dooley <7017118+VirginiaDooley@users.noreply.github.com>
Date: Mon, 1 Dec 2025 22:13:59 +0000
Subject: [PATCH 3/6] consolidate divs to reduce padding

---
 app/views/dashboard/_address_search.html.erb | 32 ++++++--------------
 1 file changed, 9 insertions(+), 23 deletions(-)

diff --git a/app/views/dashboard/_address_search.html.erb b/app/views/dashboard/_address_search.html.erb
index b4c74545..c0db2465 100644
--- a/app/views/dashboard/_address_search.html.erb
+++ b/app/views/dashboard/_address_search.html.erb
@@ -1,13 +1,13 @@
 <turbo-frame id="main-panel">
-    <div class="w-full px-3 py-3 sm:px-4 sm:py-4">
-        <div class="bg-gray-50 rounded-lg shadow-sm max-w-xl mx-auto p-3 sm:p-6">
-            <%= form_with url: dashboard_panel_path('address_search'), method: :post, data: { turbo_frame: 'main-panel' }, html: { class: "space-y-3 sm:space-y-4" } do |form| %>
+    <div class="w-full px-4 py-4">
+        <div class="bg-gray-50 rounded-lg shadow-sm max-w-xl mx-auto p-4 sm:p-6">
+            <%= form_with url: dashboard_panel_path('address_search'), method: :post, data: { turbo_frame: 'main-panel' }, html: { class: "space-y-4" } do |form| %>
                 <div class="relative">
-                    <%= form.label :address, "Enter your address", class: "block text-xs sm:text-sm font-medium text-gray-700 mb-1" %>
-                    <%= form.text_field :address, placeholder: "123 Main St, City, State, Zip", class: "w-full py-2.5 sm:py-3 px-3 sm:px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", autocomplete: "off" %>
+                    <%= form.label :address, "Enter your address", class: "block text-sm font-medium text-gray-700 mb-1" %>
+                    <%= form.text_field :address, placeholder: "e.g., 123 Main St, City, State, Zip Code", class: "w-full py-3 px-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", autocomplete: "off" %>
                 </div>
-                <div class="flex justify-center w-full mb-3 sm:mb-4">
-                    <%= form.submit "Find My Representatives", class: "inline-flex items-center bg-blue-500 hover:bg-blue-700 text-white font-semibold py-3 sm:py-3.5 px-4 sm:px-5 border border-blue-700 rounded-lg text-sm sm:text-base" %>
+                <div class="flex justify-center w-full">
+                    <%= form.submit "Find My Representatives", class: "w-full sm:w-auto bg-blue-500 hover:bg-blue-700 text-white font-semibold py-3 px-4 border border-blue-700 rounded-lg text-base sm:text-lg" %>
                 </div>
             <% end %>
 
@@ -15,24 +15,10 @@
             <% reps = (defined?(representatives) ? representatives : @representatives) %>
             <% did_search = (defined?(searched) ? searched : @searched) %>
             <% if did_search %>
-                <div class="mt-4 sm:mt-6 mb-1 sm:mb-2">
+                <div class="mt-6 mb-2">
                     <%= render partial: 'representatives_table', locals: { representatives: reps } %>
                 </div>
-                <div id="search-results" class="w-full px-6 py-4 hidden">
-                    <div id="loading-message" class="text-center px-4 py-3 text-gray-500 text-sm hidden">
-                        <span class="mr-1">Finding your representatives</span>
-                        <span class="animate-pulse">...</span>
-                    </div>
-                    <div id="error-message" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md hidden">
-                        <p class="font-medium">Unable to find representatives</p>
-                        <p class="text-sm mt-1">Please check your address and try again.</p>
-                    </div>
-                    <div id="representatives-list" class="space-y-3 hidden">
-                        <!-- Representatives will be populated here -->
-                    </div>
-                </div>
-            </div>
+            <% end %>
         </div>
     </div>
- </div>
 </turbo-frame>

From 1fef73a299a6d82c56ab8efaf920768a9d551bf7 Mon Sep 17 00:00:00 2001
From: Virginia Dooley <7017118+VirginiaDooley@users.noreply.github.com>
Date: Mon, 1 Dec 2025 22:15:31 +0000
Subject: [PATCH 4/6] reduce the button size to fit the label

---
 app/views/dashboard/_address_search.html.erb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/dashboard/_address_search.html.erb b/app/views/dashboard/_address_search.html.erb
index c0db2465..49667bf3 100644
--- a/app/views/dashboard/_address_search.html.erb
+++ b/app/views/dashboard/_address_search.html.erb
@@ -6,8 +6,8 @@
                     <%= form.label :address, "Enter your address", class: "block text-sm font-medium text-gray-700 mb-1" %>
                     <%= form.text_field :address, placeholder: "e.g., 123 Main St, City, State, Zip Code", class: "w-full py-3 px-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", autocomplete: "off" %>
                 </div>
-                <div class="flex justify-center w-full">
-                    <%= form.submit "Find My Representatives", class: "w-full sm:w-auto bg-blue-500 hover:bg-blue-700 text-white font-semibold py-3 px-4 border border-blue-700 rounded-lg text-base sm:text-lg" %>
+                <div class="flex justify-center w-full mb-4">
+                    <%= form.submit "Find My Representatives", class: "inline-flex items-center bg-blue-500 hover:bg-blue-700 text-white font-semibold py-3 px-4 border border-blue-700 rounded-lg text-base sm:text-lg" %>
                 </div>
             <% end %>
 

From cb58bb796b1f450514ffd836d10cae2fbaf8af9a Mon Sep 17 00:00:00 2001
From: Virginia Dooley <7017118+VirginiaDooley@users.noreply.github.com>
Date: Mon, 1 Dec 2025 22:27:27 +0000
Subject: [PATCH 5/6] hide table headers on smaller devices

---
 .../_representatives_table.html.erb           | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/views/representatives/_representatives_table.html.erb b/app/views/representatives/_representatives_table.html.erb
index fdc92af9..4f541a7a 100644
--- a/app/views/representatives/_representatives_table.html.erb
+++ b/app/views/representatives/_representatives_table.html.erb
@@ -1,14 +1,14 @@
 <%# app/views/pages/_representatives_table.html.erb %>
 <% if representatives.present? %>
-  <div class="overflow-x-auto md:overflow-visible border border-gray-200 rounded-lg shadow-sm mb-6 sm:mb-8">
-    <table class="w-full table-auto text-[11px] sm:text-xs md:text-sm">
+  <div class="overflow-x-auto md:overflow-visible border border-gray-200 rounded-lg shadow-sm mb-8">
+    <table class="w-full table-auto text-xs sm:text-sm">
       <thead class="hidden md:table-header-group">
         <tr class="bg-gray-50 border-b border-gray-200">
-          <th class="w-30 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">Image</th>
-          <th class="w-40 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">Name</th>
-          <th class="w-40 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">Office</th>
-          <th class="w-48 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">Contact Details</th>
-          <th class="w-32 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">Links</th>
+          <th class="w-24 px-2 sm:px-4 py-2 sm:py-3 text-center text-[10px] sm:text-xs font-medium text-gray-500 uppercase tracking-wide border-b-2 border-gray-200 whitespace-normal break-words">Image</th>
+          <th class="w-32 px-2 sm:px-4 py-2 sm:py-3 text-center text-[10px] sm:text-xs font-medium text-gray-500 uppercase tracking-wide border-b-2 border-gray-200 whitespace-normal break-words">Name</th>
+          <th class="w-32 px-2 sm:px-4 py-2 sm:py-3 text-center text-[10px] sm:text-xs font-medium text-gray-500 uppercase tracking-wide border-b-2 border-gray-200 whitespace-normal break-words">Office</th>
+          <th class="w-40 px-2 sm:px-4 py-2 sm:py-3 text-center text-[10px] sm:text-xs font-medium text-gray-500 uppercase tracking-wide border-b-2 border-gray-200 whitespace-normal break-words">Contact Details</th>
+          <th class="w-28 px-2 sm:px-4 py-2 sm:py-3 text-center text-[10px] sm:text-xs font-medium text-gray-500 uppercase tracking-wide border-b-2 border-gray-200 whitespace-normal break-words">Links</th>
         </tr>
       </thead>
       <tbody class="bg-white">
@@ -26,10 +26,10 @@
                 <div class="flex justify-center p-1 sm:p-2"><div class="h-28 w-28 sm:h-32 sm:w-32 md:h-24 md:w-24 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center text-white font-semibold text-base md:text-sm"><%= initials %></div></div>
               <% end %>
             </td>
-            <td class="text-center block md:table-cell px-3 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
-              <div class="text-center font-medium text-gray-900 text-[12px] sm:text-sm"><%= rep["name"].presence || '-' %></div>
+            <td class="text-center block md:table-cell px-4 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
+              <div class="text-center font-medium text-gray-900"><%= rep["name"].presence || '-' %></div>
             </td>
-            <td class="text-center block md:table-cell px-3 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
+            <td class="text-center block md:table-cell px-4 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
               <% office_text = rep["office"].presence || rep["title"].presence || rep["level"].presence || rep["position"].presence || rep["role"].presence %>
               <% if rep["other_names"].present? && rep["other_names"].is_a?(Array) %>
                 <% names = rep["other_names"].map { |n| n.is_a?(Hash) ? n["name"] : n.to_s }.reject(&:blank?) %>
@@ -45,13 +45,13 @@
                 <div class="text-center text-[11px] sm:text-sm"><%= office_text %></div>
               <% end %>
             </td>
-            <td class="text-center block md:table-cell px-3 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
+            <td class="text-center block md:table-cell px-4 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
               <% email = (rep["contact_details"]&.find { |c| c["type"] == 'email' }&.dig("value") rescue nil) || rep["email"] || rep["contact_email"] %>
               <% phone = (rep["contact_details"]&.find { |c| c["type"] == 'phone' }&.dig("value") rescue nil) || rep["phone"] || rep["contact_phone"] %>
               <% if email.present? || phone.present? %>
-                <ul class="text-left space-y-1 inline-block">
+                <ul class="text-center space-y-1 inline-block">
                   <% if email.present? %>
-                    <li><a href="mailto:<%= email %>" class="break-all text-blue-600 hover:underline"><%= email %></a></li>
+                    <li><a href="mailto:<%= email %>" class="text-blue-600 hover:underline break-normal"><%= email %></a></li>
                   <% end %>
                   <% if phone.present? %>
                     <li><a href="tel:<%= phone %>" class="break-all text-blue-600 hover:underline"><%= phone %></a></li>
@@ -61,7 +61,7 @@
                 <div class="text-center">-</div>
               <% end %>
             </td>
-            <td class="text-center block md:table-cell px-3 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
+            <td class="text-center block md:table-cell px-4 py-2 md:px-6 md:py-4 align-center whitespace-normal break-words">
               <% all_links = [] %>
               <% website = rep["website"] || rep["url"] || rep["official_website"] %>
               <% if website.present? %>

From a53610597675edc52b19b688ba995d73c2e1477f Mon Sep 17 00:00:00 2001
From: Virginia Dooley <7017118+VirginiaDooley@users.noreply.github.com>
Date: Tue, 2 Dec 2025 15:09:58 +0000
Subject: [PATCH 6/6] add margin between flexbox elements

---
 app/views/dashboard/index.html.erb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index 55d593e3..b94f2eb9 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -1,6 +1,6 @@
 <div class="min-h-screen bg-gray-50 px-3 py-4 sm:p-6 container max-w-6xl mx-auto">
-  <div class="flex flex-col md:flex-row gap-4 sm:gap-6 mb-6 sm:mb-8">
-    <div class="order-1 md:order-1 w-full md:w-1/3 bg-white rounded-lg shadow-sm p-4 sm:p-6 flex flex-col justify-between">
+  <div class="flex flex-col md:flex-row gap-4 sm:gap-6 mb-6 sm:mb-8 md:mx-4">
+    <div class="order-1 md:order-1 w-full md:w-1/3 bg-white rounded-lg shadow-sm p-4 sm:p-6 flex flex-col justify-between mb-6 md:mb-0">
       <%= render 'dashboard/home' %>
     </div>
     <div class="order-3 md:order-2 w-full md:w-2/3 bg-white rounded-lg shadow-sm p-4 sm:p-6">