Make the server WebUI usable on phone viewports #10

New Issue

2026-05-30T15:03:34+02:00

Brummel commented

2026-05-30 15:03:34 +02:00

The server-rendered WebUI works well on desktop but is near-unusable on a
phone. Pages live under server/templates/ (login.html, my_cases.html,
case_recordings.html, case_page.html); there are no separate CSS files —
styles are inline <style> blocks per template.

Root causes (verified)

No viewport meta tag. Every template carries only
<meta charset="utf-8"> and no
<meta name="viewport" content="width=device-width, initial-scale=1">
— login.html:4, my_cases.html:6, case_recordings.html:5,
case_page.html:6. Without it, mobile browsers lay the page out in a
~980px virtual canvas and zoom out, so all text and controls render tiny.
Fixed desktop width. body { max-width: 900px } on
my_cases.html:9, case_recordings.html:8, and case_page.html:11.
No responsive breakpoints. A @media grep over server/templates/
returns zero matches; no layout adapts to narrow widths.
Layouts do not reflow. The case list uses
display: grid; grid-template-columns: 1fr auto (my_cases.html:19) and
flex action bars (.bulk-bar, .required-bar) that stay side-by-side on
narrow screens.
Sub-target touch controls. The delete/reopen buttons use padding: 0.3em
(case_recordings.html:56,58) and the audio player has fixed-width controls
(.seek { max-width: 6em }, .time { min-width: 5.5em } — case_recordings.html:59-60),
below the ~44px touch-target guidance.

Acceptance

Each template includes a width=device-width, initial-scale=1 viewport meta tag.
my_cases, case_recordings, and case_page are readable and operable on a ~390px-wide viewport without horizontal scrolling or pinch-zoom.
Action bars and case rows reflow vertically on narrow widths.
Primary touch targets (delete, reopen, play/seek) meet ~44px minimum.
Desktop layout is unchanged at >=900px width.

Claim (unverified): no JS changes are required; the fixes are CSS-only
(viewport tag plus @media breakpoints in the existing inline <style>
blocks). To be confirmed when the work is scoped.

The server-rendered WebUI works well on desktop but is near-unusable on a phone. Pages live under `server/templates/` (`login.html`, `my_cases.html`, `case_recordings.html`, `case_page.html`); there are no separate CSS files — styles are inline `<style>` blocks per template. ## Root causes (verified) - **No viewport meta tag.** Every template carries only `<meta charset="utf-8">` and no `<meta name="viewport" content="width=device-width, initial-scale=1">` — `login.html:4`, `my_cases.html:6`, `case_recordings.html:5`, `case_page.html:6`. Without it, mobile browsers lay the page out in a ~980px virtual canvas and zoom out, so all text and controls render tiny. - **Fixed desktop width.** `body { max-width: 900px }` on `my_cases.html:9`, `case_recordings.html:8`, and `case_page.html:11`. - **No responsive breakpoints.** A `@media` grep over `server/templates/` returns zero matches; no layout adapts to narrow widths. - **Layouts do not reflow.** The case list uses `display: grid; grid-template-columns: 1fr auto` (`my_cases.html:19`) and flex action bars (`.bulk-bar`, `.required-bar`) that stay side-by-side on narrow screens. - **Sub-target touch controls.** The delete/reopen buttons use `padding: 0.3em` (`case_recordings.html:56,58`) and the audio player has fixed-width controls (`.seek { max-width: 6em }`, `.time { min-width: 5.5em }` — `case_recordings.html:59-60`), below the ~44px touch-target guidance. ## Acceptance - [ ] Each template includes a `width=device-width, initial-scale=1` viewport meta tag. - [ ] `my_cases`, `case_recordings`, and `case_page` are readable and operable on a ~390px-wide viewport without horizontal scrolling or pinch-zoom. - [ ] Action bars and case rows reflow vertically on narrow widths. - [ ] Primary touch targets (delete, reopen, play/seek) meet ~44px minimum. - [ ] Desktop layout is unchanged at >=900px width. Claim (unverified): no JS changes are required; the fixes are CSS-only (viewport tag plus `@media` breakpoints in the existing inline `<style>` blocks). To be confirmed when the work is scoped.

Brummel added this to the Mobile-usable WebUI milestone 2026-05-30 15:03:34 +02:00

Brummel added the feature label 2026-05-30 15:03:34 +02:00

Brummel referenced this issue from a commit

2026-05-30 16:42:35 +02:00

plan: responsive WebUI on phone viewports

Brummel referenced this issue from a commit

2026-05-30 16:42:35 +02:00

feat(web): make server WebUI usable on phone viewports

Brummel closed this issue

2026-05-30 16:42:35 +02:00

Brummel referenced this issue

2026-05-30 17:26:13 +02:00