Rework the mobile map experience around one-handed use

[AnayDhawan]

Problem

Most people use this on a phone, often while actually travelling to the place they just looked up. The current layout still carries desktop assumptions: the place card and filters sit where a mouse would reach, not where a thumb does.

Where to start

• src/components/map/ - map and place card components
• Test on a real device. A narrow desktop viewport will not reproduce the touch behaviour that matters here.

What to change

Replace the place card with a bottom sheet that can be dragged between three heights: peek, half and full. The map must stay interactive while the sheet is at peek height.

Move the primary filters into thumb reach rather than the top of the screen.

Check tap targets against a 44px minimum.

Respect safe-area insets so nothing hides behind a home indicator or notch.

Acceptance criteria

• Place card is a draggable bottom sheet with three stops
• Map can be panned and zoomed while the sheet is at peek height
• Dragging the sheet does not accidentally pan the map underneath
• All interactive elements are at least 44x44px
• Layout is correct on a notched device in both orientations
• Desktop layout is unchanged or improved, not regressed

Verifying

npm install
npm run dev

Then open it on an actual phone on your network. Please include a screen recording in the PR.

Notes

The tricky part is gesture conflict between the sheet and the Leaflet map underneath. Solve that first; the rest is layout.

Scope: large, roughly 4 hours, and needs real device testing.

New to the repo? Start with CONTRIBUTING.md.