From a47f586be0e0e77b5192809783c9bb1850bbd21a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 8 Jan 2026 02:41:36 +0000
Subject: [PATCH 1/2] Fix: Call map.invalidateSize() on tab switch to resolve
blank map issues
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.
---
src/RailRound.jsx | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/src/RailRound.jsx b/src/RailRound.jsx
index 2d5fd1b..bcee180 100644
--- a/src/RailRound.jsx
+++ b/src/RailRound.jsx
@@ -1681,6 +1681,16 @@ export default function RailLOOPApp() {
}, []);
useEffect(() => { if (activeTab === 'map' && leafletReady) setTimeout(initMap, 100); }, [activeTab, leafletReady]);
+
+ // Fix: Invalidate map size when switching back to map tab to prevent blank tiles
+ useEffect(() => {
+ if (activeTab === 'map' && mapInstance.current) {
+ setTimeout(() => {
+ mapInstance.current.invalidateSize();
+ }, 200);
+ }
+ }, [activeTab]);
+
useEffect(() => { if (mapInstance.current && leafletReady && geoData) renderBaseMap(geoData); }, [geoData, leafletReady]);
const [segmentGeometries, setSegmentGeometries] = useState(new Map()); // Key -> { coords, color, isMulti, fallback }
const [tripSegmentsGeometry, setTripSegmentsGeometry] = useState([]);
From 01f0bb8e4a769baa509c31ff36a48b77f916aab8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 8 Jan 2026 03:06:43 +0000
Subject: [PATCH 2/2] Feat: Mobile-specific route rotation for overflowing
visuals
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.
---
src/RailRound.jsx | 44 +++++++++++++++++++++++++++++++++++++++++---
1 file changed, 41 insertions(+), 3 deletions(-)
diff --git a/src/RailRound.jsx b/src/RailRound.jsx
index bcee180..0c3b861 100644
--- a/src/RailRound.jsx
+++ b/src/RailRound.jsx
@@ -5,6 +5,7 @@ import buildKMLString from './buildKml';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import * as turf from '@turf/turf';
+import { isMobile } from 'react-device-detect';
// Quick import-time log to ensure the module loads when Vite imports it.
try { console.log('[iconfixed] module loaded'); } catch {}
import {
@@ -1069,6 +1070,28 @@ const getRouteVisualData = (segments, segmentGeometries, railwayData, geoData) =
};
const RouteSlice = ({ segments, segmentGeometries, railwayData, geoData }) => {
+ const containerRef = useRef(null);
+ const [containerWidth, setContainerWidth] = useState(0);
+
+ useEffect(() => {
+ // Basic measurement of the parent container or the window if simpler
+ // Ideally we want the width of the list item container to subtract 300px
+ const measure = () => {
+ if (containerRef.current) {
+ // Traverse up to find the trip card container (closest relative/absolute parent usually works, or just take window width for mobile heuristics if the card is full width)
+ // Given the layout "flex-1 space-y-2 relative" is the text container.
+ // Let's use the closest meaningful parent width.
+ const parent = containerRef.current.closest('.bg-white'); // The card container
+ if (parent) {
+ setContainerWidth(parent.offsetWidth);
+ }
+ }
+ };
+ measure();
+ window.addEventListener('resize', measure);
+ return () => window.removeEventListener('resize', measure);
+ }, []);
+
const { visualPaths, totalDist, widthPx, heightPx } = useMemo(
() => getRouteVisualData(segments, segmentGeometries, railwayData, geoData),
[segments, segmentGeometries, railwayData, geoData]
@@ -1076,13 +1099,28 @@ const RouteSlice = ({ segments, segmentGeometries, railwayData, geoData }) => {
if (visualPaths.length === 0) return