Mobile UI: Phase 1 - Responsive layout pass

[JeffreyBLewis]

Part of a 5-phase plan to make the site usable on phones/tablets without a parallel mobile site. Tracking issue for the plan: see linked issues.

Goal

Fix layout so no page requires horizontal scrolling or pinch-zoom on a ~375px viewport, using CSS breakpoints only (no JS/interaction changes).

Scope

• Add col-xs/col-sm companions where templates only specify col-md-* (e.g. data.tpl, about.tpl, district.tpl, person.tpl, member_party_list.tpl).
• Make chart/map containers fluid-width instead of relying on fixed-pixel SVGs (congress.js scatter is hardcoded to .width(890); district map similar).
• Verify chart SVGs use viewBox + width: 100% so they scale down instead of overflowing.
• Re-check touch target sizing (buttons, slider handles, form controls) at small widths.

Out of scope

Touch gesture behavior for the scatter brush, map pan/zoom, and hover tooltips — tracked separately in the follow-on phases.

Test plan

• No horizontal page scroll at 375px and 768px viewport widths on: congress, vote, district, party, committee, data, about, person pages
• Chart/map SVGs scale to container width without clipping
• Existing WCAG 2.1 AA checks (focus states, ARIA labels) still pass after layout changes

🤖 Generated with Claude Code

https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT

[JeffreyBLewis]

Follow-on phases: #449 (tooltips), #450 (scatter selection), #451 (map panning), #452 (device/a11y test pass).