From 8a668e6a59d8c59935978ab064fe72eb3a28ae68 Mon Sep 17 00:00:00 2001
From: Logan <Logan@simplestepsolutions.com>
Date: Mon, 25 May 2026 14:09:47 -0400
Subject: [PATCH] fix: move map action buttons to top-left to avoid legend
 overlap

Fit and traffic buttons were hidden behind the legend at bottom-right.
Moved both into a column group at top-left below the zoom controls,
where there is clear unobstructed space. Replaced emoji with TRF text label.
---
 drb-frontend/components/MapView.tsx | 50 ++++++++++++++---------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/drb-frontend/components/MapView.tsx b/drb-frontend/components/MapView.tsx
index 744c678..18242df 100644
--- a/drb-frontend/components/MapView.tsx
+++ b/drb-frontend/components/MapView.tsx
@@ -523,31 +523,31 @@ export default function MapView({ nodes, activeCalls, incidents = [], lastUpdate
         </div>
       )}
 
-      {/* ── Traffic toggle ───────────────────────────────────────────────────── */}
-      {process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY && (
-        <button
-          onClick={() => setTrafficEnabled((v) => !v)}
-          title="Toggle traffic layer"
-          className={`absolute bottom-[6.5rem] right-3 z-[1001] w-8 h-8 border rounded text-xs font-bold leading-none transition-colors flex items-center justify-center select-none ${
-            trafficEnabled
-              ? "bg-green-700 border-green-500 text-white"
-              : "bg-gray-950/90 border-gray-700 text-gray-400 hover:bg-gray-800"
-          }`}
-        >
-          🚦
-        </button>
-      )}
-
-      {/* ── Auto-fit button ──────────────────────────────────────────────────── */}
-      {mapInstance && allPositions.length > 0 && (
-        <button
-          onClick={handleFitAll}
-          title="Fit all markers in view"
-          className="absolute bottom-[9.5rem] right-3 z-[1001] w-8 h-8 bg-gray-950/90 border border-gray-700 rounded text-white text-base leading-none hover:bg-gray-800 transition-colors flex items-center justify-center select-none"
-        >
-          ⤢
-        </button>
-      )}
+      {/* ── Map action buttons — top-left, below zoom controls ──────────────── */}
+      <div className="absolute top-[4.5rem] left-3 z-[1001] flex flex-col gap-1">
+        {mapInstance && allPositions.length > 0 && (
+          <button
+            onClick={handleFitAll}
+            title="Fit all markers in view"
+            className="w-8 h-8 bg-gray-950/90 border border-gray-700 rounded text-white text-base leading-none hover:bg-gray-800 transition-colors flex items-center justify-center select-none"
+          >
+            ⤢
+          </button>
+        )}
+        {process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY && (
+          <button
+            onClick={() => setTrafficEnabled((v) => !v)}
+            title="Toggle traffic layer"
+            className={`w-8 h-8 border rounded text-xs font-mono font-bold leading-none transition-colors flex items-center justify-center select-none ${
+              trafficEnabled
+                ? "bg-indigo-700 border-indigo-500 text-white"
+                : "bg-gray-950/90 border-gray-700 text-gray-400 hover:bg-gray-800"
+            }`}
+          >
+            TRF
+          </button>
+        )}
+      </div>
 
       {/* ── Clock — bottom-left for TOC situational awareness ───────────────── */}
       <div className="absolute bottom-8 left-3 z-[1001] bg-gray-950/90 border border-gray-800 rounded-lg px-3 py-2 pointer-events-none">