CLIM-1235: Map Legend hidden by Location Modal

[renoirb]

Description

Problem

When both the map legend and location modal are open simultaneously, the location modal overlaps the legend, obscuring it completely. This occurs because both UI components use z-30 and are positioned from the right side of the map, causing the LocationModal (which renders after the Legend in the DOM) to paint on top.

Solution

Implement Redux state management for map UI overlays, allowing the LocationModal to dynamically adjust its position based on whether the legend is open or closed.

Implementation Details

1. Redux State Architecture - MapOverlayState Interface

• Created new MapOverlayState interface to represent UI overlay components
• Includes isOpen: boolean property to track open/closed state
• Future-ready with commented properties for overlap detection: width, height, x, y, bounds

2. Redux Store Updates (map-slice.ts)

• Added legend: MapOverlayState to track legend panel state
• Added locationModal: MapOverlayState to track location modal state (prepared for future use)
• Created setLegendOpen(boolean) action to control legend state
• Created setLocationModalOpen(boolean) action (prepared for future use)

3. Component Refactoring

MapLegend Component:

• Migrated from local useState to Redux for isOpen state
• Now dispatches setLegendOpen() instead of calling setIsOpen()
• Maintains existing behavior: opens automatically when map width >= 430px

LocationModal Component:

• Reads state.map.legend.isOpen from Redux
• Refactored className management for clarity and maintainability
• Implements conditional positioning:
  • Legend closed: md:right-28 (~112px from right edge)
  • Legend open: md:right-[480px] (~480px from right edge)
• This adjustment prevents the ~338px overlap when both components are visible
• Added comprehensive component documentation explaining positioning logic

Behavior

• Legend opens automatically on wider screens (>= 430px map width) - from parent branch CLIM-1233: Map Legend, opened by default #643
• LocationModal positioning adjusts dynamically based on legend state
• No overlap occurs when both components are visible
• Smooth user experience with predictable UI behavior

Future Enhancements

The MapOverlayState interface architecture supports:

• Precise overlap detection using DOM DOMRect bounds
• Dynamic positioning calculations based on actual component dimensions
• Sophisticated multi-overlay coordination and z-index management
• Potential integration with setLocationModalOpen() action for consistent state management

Testing Checklist

• Verify legend opens automatically on screens >= 430px width
• Toggle legend open/closed and confirm LocationModal repositions correctly
• Test with both components open simultaneously - verify no overlap
• Test on various screen sizes (mobile: centered, desktop: right-positioned)
• Verify behavior in Forecast mode (where both components appear)

Related ticket

• CLIM-1235

Related PRs

• CLIM-1233: Map Legend, opened by default #643