Brummel
a37a1ae363
The server-rendered pages worked on desktop but were near-unusable on a phone: no viewport meta tag (mobile browsers laid out in a ~980px canvas and zoomed out, rendering everything tiny) and a fixed `max-width: 900px` desktop body with zero responsive breakpoints. Fix is CSS-only and purely additive: - Add `<meta name="viewport" content="width=device-width, initial-scale=1">` to all four page templates (each owns its own <head> — askama uses import/include here, no shared base layout, so the tag lands in 4 places). - Append a single `@media (max-width: 640px)` block to the three desktop-width pages (my_cases, case_recordings, case_page): case rows and action bars reflow to a single column, the audio player goes full-width, and primary touch targets (delete/reopen/play) get a 44px minimum. login.html already has a 360px column layout, so it needs the viewport tag only. Desktop layout is preserved by construction: a `max-width: 640px` query never matches at >=900px, so the desktop render is byte-identical. The diff adds lines only — no existing rule is touched. Breakpoint chosen at 640px (well below the 900px body width) so all portrait phones, including the ~390px target, fall under it while tablets keep the desktop layout. New integration test server/tests/responsive_test.rs pins the two textual acceptance criteria that survive without a headless browser: every page ships the viewport meta, and the three desktop-width pages ship an @media breakpoint. The visual criteria (operable at 390px, 44px touch targets) are CSS-driven and verified by eye — deliberately not covered by a browser-automation dependency. Verified: cargo test -p doctate-server --test responsive_test (4/4 green); web/login/case_page regression suites green; diff is additive. closes #10