From a37a1ae36350564ea93ad0e59fd8f7d59b18d6a6 Mon Sep 17 00:00:00 2001 From: Brummel Date: Sat, 30 May 2026 15:44:53 +0200 Subject: [PATCH] feat(web): make server WebUI usable on phone viewports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 `` to all four page templates (each owns its own — 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 --- server/templates/case_page.html | 18 ++++ server/templates/case_recordings.html | 10 +++ server/templates/login.html | 1 + server/templates/my_cases.html | 15 ++++ server/tests/responsive_test.rs | 116 ++++++++++++++++++++++++++ 5 files changed, 160 insertions(+) create mode 100644 server/tests/responsive_test.rs diff --git a/server/templates/case_page.html b/server/templates/case_page.html index 5623b91..da2c425 100644 --- a/server/templates/case_page.html +++ b/server/templates/case_page.html @@ -4,6 +4,7 @@ + Doctate — Fall {{ case_id_short }}