From 0ba891110095176eb8c1615ebb5d8fc1f10a85d7 Mon Sep 17 00:00:00 2001
From: Matt <matt@echo6.co>
Date: Tue, 28 Apr 2026 22:06:35 +0000
Subject: [PATCH] Fix button wrapping and add scale bar control

- Add whiteSpace: nowrap to Get Directions button to prevent text wrap
- Add ScaleControl (imperial units) to bottom-right of map
- Add dark theme styling for scale bar

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/MapView.jsx   |  6 ++++++
 src/components/PlaceCard.jsx |  2 +-
 src/index.css                | 13 +++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/MapView.jsx b/src/components/MapView.jsx
index 00b5fe5..fdd2676 100644
--- a/src/components/MapView.jsx
+++ b/src/components/MapView.jsx
@@ -830,6 +830,12 @@ const MapView = forwardRef(function MapView(_, ref) {
 
     map.addControl(new maplibregl.NavigationControl(), 'top-right')
 
+    // Scale bar control
+    map.addControl(new maplibregl.ScaleControl({
+      maxWidth: 120,
+      unit: 'imperial',
+    }), 'bottom-right')
+
     // Map click — two-click selection model
     map.on('click', (e) => {
       // If a stop pin was just clicked, skip
diff --git a/src/components/PlaceCard.jsx b/src/components/PlaceCard.jsx
index ebfff5f..1167217 100644
--- a/src/components/PlaceCard.jsx
+++ b/src/components/PlaceCard.jsx
@@ -420,7 +420,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
       <div className="mt-3 pt-3 flex gap-2" style={{ borderTop: "1px solid var(--border)" }}>
         {variant === "preview" && (
           <>
-            {stops.length < 2 && <button onClick={handleDirections} className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-2 rounded-lg text-[11px] font-medium" style={{ background: "var(--accent)", color: "var(--text-inverse)" }}><Navigation size={13} />Get Directions</button>}
+            {stops.length < 2 && <button onClick={handleDirections} className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-2 rounded-lg text-[11px] font-medium" style={{ background: "var(--accent)", color: "var(--text-inverse)", whiteSpace: "nowrap" }}><Navigation size={13} />Get Directions</button>}
             {existingStopIndex >= 0 ? (
               <span className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-2 rounded-lg text-[11px] font-medium" style={{ background: "var(--accent-muted)", color: "var(--accent)" }}>Stop {String.fromCharCode(65 + existingStopIndex)}</span>
             ) : (
diff --git a/src/index.css b/src/index.css
index 21a44e7..84ab9b2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -561,3 +561,16 @@ body {
 .contact-item:hover {
   background: var(--bg-overlay);
 }
+
+/* Scale control - dark theme styling */
+.maplibregl-ctrl-scale {
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: none;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 11px;
+  font-weight: 500;
+  padding: 0 5px;
+  line-height: 1.5;
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+}