Fix blank map on mobile tab switch#13
Conversation
This commit adds a `useEffect` hook to `src/RailRound.jsx` that listens for changes to the `activeTab`. When the user switches back to the 'map' tab, it triggers `mapInstance.current.invalidateSize()` after a 200ms delay. This ensures that Leaflet correctly recalculates the map container's dimensions (which may be zero or incorrect while the container is hidden via `display: none`) and redraws the tiles and vector layers. This resolves the reported issue where the map would appear blank or missing GeoJSON layers after navigating between tabs on mobile devices.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
This commit introduces a responsive design fix for route thumbnails on mobile devices. It uses `react-device-detect` to identify mobile clients and dynamically measures the container width. If a route's visual width exceeds the available space (container width - 300px), the SVG is rotated 90 degrees to display vertically, preventing horizontal overflow while maintaining visual fidelity.
Fixes a bug where the map would render blank or with missing layers after switching tabs on mobile. This is caused by Leaflet not detecting container size changes when the map div is hidden/shown.
useEffecthook to invokeinvalidateSize()whenactiveTabbecomes'map'.PR created automatically by Jules for task 4034732309434341122 started by @OsakaLOOP