From e0eeb1e9447db0f0e4f0fe75c9c7ad8b1c00c5bc Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Mon, 7 Jul 2025 10:15:43 -0400
Subject: [PATCH] Improve table readability and fix single-point map zoom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase font sizes in location table for better readability
- Center-align "Persistent" text in time remaining column
- Fix static map zoom level when displaying single location
- Use zoom level 13 for single points to show neighborhood context

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/scss/pages/_index.scss      |  9 +++++----
 src/services/MapImageService.ts | 19 ++++++++++++++++---
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/scss/pages/_index.scss b/src/scss/pages/_index.scss
index 7e6c3c6..7f1468a 100644
--- a/src/scss/pages/_index.scss
+++ b/src/scss/pages/_index.scss
@@ -174,7 +174,7 @@
   // Specific cell styles
   td.location-cell {
     color: var(--text-color);
-    font-size: $font-size-sm;
+    font-size: $font-size-md;
     font-weight: 500;
     max-width: 250px;
     overflow: hidden;
@@ -184,7 +184,7 @@
   
   td.details-cell {
     color: var(--text-color);
-    font-size: 14px;
+    font-size: $font-size-md;
     font-weight: 400;
     max-width: 200px;
     overflow: hidden;
@@ -195,14 +195,15 @@
   
   td.time-cell {
     color: var(--text-color);
-    font-size: 12px;
+    font-size: $font-size-sm;
     font-weight: 400;
   }
   
   td.remaining-cell {
     color: var(--text-color);
-    font-size: 12px;
+    font-size: $font-size-sm;
     font-weight: 500;
+    text-align: center;
     
     &.urgent {
       @include status-indicator(var(--status-danger, $danger-color), white);
diff --git a/src/services/MapImageService.ts b/src/services/MapImageService.ts
index 622e7df..4a56cb9 100644
--- a/src/services/MapImageService.ts
+++ b/src/services/MapImageService.ts
@@ -63,8 +63,18 @@ export class MapImageService {
     // Build Mapbox Static Maps URL with auto-fit
     let mapboxUrl;
     if (overlays) {
-      // Use auto-fit to center on all pins
-      mapboxUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/${overlays}/auto/${options.width}x${options.height}?access_token=${mapboxToken}`;
+      // Check if we have only one location
+      const validLocations = locations.filter(loc => loc.latitude && loc.longitude);
+      
+      if (validLocations.length === 1) {
+        // For single location, use fixed zoom level to avoid zooming too close
+        const location = validLocations[0];
+        const zoomLevel = 13; // City-level zoom, shows neighborhood context
+        mapboxUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/${overlays}/${location.longitude},${location.latitude},${zoomLevel}/${options.width}x${options.height}?access_token=${mapboxToken}`;
+      } else {
+        // Multiple locations, use auto-fit to show all pins
+        mapboxUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/${overlays}/auto/${options.width}x${options.height}?access_token=${mapboxToken}`;
+      }
     } else {
       // No locations, use Grand Rapids as fallback
       const fallbackLat = 42.960081464833195;
@@ -72,7 +82,10 @@ export class MapImageService {
       mapboxUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/${fallbackLng},${fallbackLat},10/${options.width}x${options.height}?access_token=${mapboxToken}`;
     }
     
-    console.info('Fetching Mapbox static map with auto-fit...');
+    console.info('Fetching Mapbox static map...');
+    if (overlays && locations.filter(loc => loc.latitude && loc.longitude).length === 1) {
+      console.info('Using fixed zoom level for single location');
+    }
     console.info('URL:', mapboxUrl.replace(mapboxToken, 'TOKEN_HIDDEN'));
     
     return new Promise((resolve) => {