logan/server-26
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move map action buttons to top-left to avoid legend overlap

Browse Source 
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.
This commit is contained in:
Logan
2026-05-25 14:09:47 -04:00
parent dbacd9a9a8
commit 8a668e6a59
1 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
drb-frontend/components/MapView.tsx
+25 -25
View File
@@ -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">