Mobile UI: Phase 4 - Native touch panning on the district map

[JeffreyBLewis]

Part of the mobile UI plan (see Phase 1 issue for overview).

Goal

Map panning is currently driven by two bootstrap-slider handles (static/js/mapPanZoom.js lines ~100-127) rather than direct touch/drag — awkward two-axis panning on a small screen. Zoom is already button-stepped and touch-fine.

Scope

• Add direct touch pan on the map SVG (pointer/touch events updating panX/panY in mapPanZoom.js directly), gated on (pointer: coarse).
• Keep the zoom in/out buttons as-is.
• Keep the slider-based panning for pointer-fine devices, or replace entirely if direct panning proves better for both — decide during implementation.
• Set touch-action appropriately on the map container so panning doesn't fight the browser's own scroll/zoom gestures.

Test plan

• On a touch device/emulator, dragging the map pans it smoothly at zoom > 1
• Zoom buttons still work and stay in sync with pan bounds
• No regression to desktop slider-based panning (if kept)

🤖 Generated with Claude Code

https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT

[JeffreyBLewis]

Overview/Phase 1: #448