Redesign map marker popups and train detail cards

[Julian-Louis]

Summary by CodeRabbit

• New Features

  • Added production ad placements for the home and map experiences.
  • Expanded train detail cards with route, service, statistics, consist, locomotive, signal, and navigation information.
  • Enhanced station, remote station, signal, and non-playable station popups with structured details and clearer labels.

• Style

  • Refined map layout, tooltips, popups, markers, avatars, and train cards.
  • Added responsive styling for smaller screens and improved dark/light-mode presentation.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b2c5e135-f84b-4273-b8fc-a3cf2e7a8df2

📥 Commits

Reviewing files that changed from the base of the PR and between 91f707f and 3260ff3.

📒 Files selected for processing (14)

• packages/home/.env.production
• packages/map/.env.production
• packages/map/components/Map.tsx
• packages/map/components/Markers/NonPlayableStationMarker.tsx
• packages/map/components/Markers/SignalMarker.tsx
• packages/map/components/Markers/StationMarker.tsx
• packages/map/components/Markers/StationRemoteMarker.tsx
• packages/map/components/Markers/TrainMarker.tsx
• packages/map/components/TrainText.tsx
• packages/map/styles/Map.module.css
• packages/map/styles/MarkerPopup.module.css
• packages/map/styles/SelectedTrainPopup.module.css
• packages/map/styles/TrainDetails.module.css
• packages/map/styles/globals.css

---

📝 Walkthrough

Walkthrough

Production AdSense slot variables were added. The map UI now uses CSS-based canvas sizing and redesigned marker, train, Leaflet popup, tooltip, and control styling.

Changes

Production AdSense configuration

Layer / File(s)	Summary
AdSense slot configuration packages/home/.env.production, packages/map/.env.production	Production environment files define AdSense slot identifiers for home and map placements.

Map presentation

Layer / File(s)	Summary
Map canvas and Leaflet shell packages/map/components/Map.tsx, packages/map/styles/Map.module.css, packages/map/styles/SelectedTrainPopup.module.css, packages/map/styles/globals.css	Map sizing moved from inline styles to mapCanvas. Leaflet popups, tooltips, avatars, and layer controls use updated styling and sizing rules.
Marker popup cards packages/map/components/Markers/*, packages/map/styles/MarkerPopup.module.css	Station, remote station, signal, and non-playable station popups render structured card content with shared CSS module styles.
Train detail presentation packages/map/components/TrainText.tsx, packages/map/components/Markers/TrainMarker.tsx, packages/map/styles/TrainDetails.module.css	Train details use structured sections for service data, route, statistics, consist, locomotive media, signals, and EDR navigation. Responsive card styles were added.

Estimated code review effort: 3 (Moderate) | ~20 minutes

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch improve-ui-ux-and-performance

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}