feat(ui): Redesign bottom-right map control cluster

- Increase touch targets from 36px to 44px (meets accessibility guidelines)
- Wrap Locate and Layers buttons in unified .map-controls-br container
- Layer popover now opens LEFT of buttons (avoids collision with Locate)
- Add hover and active states with theme-aware styling
- Proper spacing for scale control below the cluster
- Increased icon sizes from 18px to 20px
- Mobile-responsive with proper max-height on layer popover

Layout:
  [Locate] 44x44
  [Layers] 44x44
  ──────────────
  Scale: 0.5 mi

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-05-01 23:17:13 +00:00
commit 67779dbbf7
4 changed files with 84 additions and 31 deletions

View file

@ -96,8 +96,12 @@ export default function App() {
<Panel onManeuverClick={handleManeuverClick} />
<ContactModal />
<LayerControl mapRef={mapViewRef} />
<LocateButton mapRef={mapViewRef} />
{/* Bottom-right map controls */}
<div className="map-controls-br">
<LocateButton mapRef={mapViewRef} />
<LayerControl mapRef={mapViewRef} />
</div>
</div>
)
}