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

@@ -523,31 +523,31 @@ export default function MapView({ nodes, activeCalls, incidents = [], lastUpdate
         </div>
       )}
 
-      {/* ── Traffic toggle ───────────────────────────────────────────────────── */}
+      {/* ── Map action buttons — top-left, below zoom controls ──────────────── */}
-      {process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY && (
+      <div className="absolute top-[4.5rem] left-3 z-[1001] flex flex-col gap-1">
-        <button
+        {mapInstance && allPositions.length > 0 && (
-          onClick={() => setTrafficEnabled((v) => !v)}
+          <button
-          title="Toggle traffic layer"
+            onClick={handleFitAll}
-          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 ${
+            title="Fit all markers in view"
-            trafficEnabled
+            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"
-              ? "bg-green-700 border-green-500 text-white"
+          >
-              : "bg-gray-950/90 border-gray-700 text-gray-400 hover:bg-gray-800"
+            ⤢
-          }`}
+          </button>
-        >
+        )}
-          🚦
+        {process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY && (
-        </button>
+          <button
-      )}
+            onClick={() => setTrafficEnabled((v) => !v)}
-
+            title="Toggle traffic layer"
-      {/* ── Auto-fit button ──────────────────────────────────────────────────── */}
+            className={`w-8 h-8 border rounded text-xs font-mono font-bold leading-none transition-colors flex items-center justify-center select-none ${
-      {mapInstance && allPositions.length > 0 && (
+              trafficEnabled
-        <button
+                ? "bg-indigo-700 border-indigo-500 text-white"
-          onClick={handleFitAll}
+                : "bg-gray-950/90 border-gray-700 text-gray-400 hover:bg-gray-800"
-          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"
+          >
-        >
+            TRF
-          ⤢
+          </button>
-        </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">