Skip to content

feat: make world map full-size with overlaid UI elements#149

Open
EricGrill wants to merge 1 commit intopbogre:mainfrom
EricGrill:feat/full-size-world-map
Open

feat: make world map full-size with overlaid UI elements#149
EricGrill wants to merge 1 commit intopbogre:mainfrom
EricGrill:feat/full-size-world-map

Conversation

@EricGrill
Copy link

Summary

  • Makes the world map full-screen instead of fixed 3/4 width
  • Navbar and stat pills now overlay on top of the map with proper z-index
  • Map still shows entire world view on initial load
  • Improves mobile experience by using the full viewport

Changes

  • Home.tsx: Changed layout to use fixed positioning for map with z-index layering
  • WorldMap.tsx: Made map responsive with width: 100% and height: 100%, removed fixed translateExtent
  • Navbar.tsx: Added relative z-20 to ensure navbar overlays the map

Test plan

  • Verify map takes full viewport width on desktop
  • Verify map takes full viewport width on mobile
  • Verify navbar is visible and clickable above map
  • Verify stat pills are visible and readable above map
  • Verify map still zooms and pans correctly
  • Verify map shows entire world on initial load

Closes #49


Generated with Claude Code

- Changed Home page layout to use fixed positioning for the map
- Map now takes full viewport width/height below navbar
- Stats pills overlay on top of map with z-index
- Navbar has higher z-index to stay above map
- Map uses responsive width/height with proper projection config
- Removed fixed translateExtent to allow better panning on all sizes

Closes pbogre#49

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Full size world map

1 participant