feat(calls): mobile/responsive pass for the in-call UI (LC-409) #422

Merged

longjacksonle merged 1 commit from feat/lc-409-call-mobile into main

2026-06-21 01:09:47 +02:00

longjacksonle commented

2026-06-21 01:09:29 +02:00

Owner

Implements LC-409 (subtask of the LC-402 call redesign): make the in-call UI usable on a phone.

Changes (all under the 640px breakpoint)

Control bar: the title moves to its own row and the two control clusters (media + session) become a single horizontally-scrollable row beneath it - instead of wrapping into several cramped lines. The clusters are wrapped in a new .lc-callbar-controls container; buttons keep full label width and the row scrolls. Touch targets get a 2.5rem min-height.
Transcript drawer -> bottom sheet: full width, anchored to the bottom (62vh, rounded top), so it never covers the controls. The 20rem right-padding reservation on #lc-voice-root is dropped on mobile, and the scroll body respects env(safe-area-inset-bottom).
Participant grid: tighter gutters and a safe-area bottom inset so the last row clears the iOS home indicator. (It was already single-column at narrow widths; the screen-share stage/filmstrip already use clamp()/vh and stay responsive.)

Scope

CSS plus one small template restructure in voice/page.html (wrap the control clusters, class the title/spacer). No JS, Rust, or schema change. Desktop layout is unchanged - the controls wrapper is still pushed right by the spacer.

Tests

just check (standalone + saas compile, clippy, fmt), just test, just test-saas all pass. just build-css regenerated.

Implements LC-409 (subtask of the LC-402 call redesign): make the in-call UI usable on a phone. ## Changes (all under the 640px breakpoint) - **Control bar:** the title moves to its own row and the two control clusters (media + session) become a single **horizontally-scrollable row** beneath it - instead of wrapping into several cramped lines. The clusters are wrapped in a new `.lc-callbar-controls` container; buttons keep full label width and the row scrolls. Touch targets get a `2.5rem` min-height. - **Transcript drawer -> bottom sheet:** full width, anchored to the bottom (`62vh`, rounded top), so it never covers the controls. The `20rem` right-padding reservation on `#lc-voice-root` is dropped on mobile, and the scroll body respects `env(safe-area-inset-bottom)`. - **Participant grid:** tighter gutters and a safe-area bottom inset so the last row clears the iOS home indicator. (It was already single-column at narrow widths; the screen-share stage/filmstrip already use `clamp()`/`vh` and stay responsive.) ## Scope CSS plus one small template restructure in `voice/page.html` (wrap the control clusters, class the title/spacer). No JS, Rust, or schema change. Desktop layout is unchanged - the controls wrapper is still pushed right by the spacer. ## Tests `just check` (standalone + saas compile, clippy, fmt), `just test`, `just test-saas` all pass. `just build-css` regenerated.

longjacksonle added 1 commit

2026-06-21 01:09:30 +02:00

feat(calls): mobile/responsive pass for the in-call UI (LC-409)

check-secrets / TruffleHog (push) Successful in 4s

Details

check-secrets / Kingfisher (push) Successful in 4s

Details

check-secrets / Nosey parker (push) Successful in 5s

Details

check-secrets / Kingfisher (pull_request) Successful in 4s

Details

check-secrets / TruffleHog (pull_request) Successful in 5s

Details

check-secrets / Nosey parker (pull_request) Successful in 6s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

Check / clippy + fmt + tests (pull_request) Successful in 3m10s

Details

e33e28df5d

Makes the redesigned voice-call UI usable on a phone.

- Control bar: under 640px the title moves to its own row and the two control clusters become a single horizontally-scrollable row beneath it (wrapped in a new .lc-callbar-controls container), instead of wrapping into several cramped lines. Buttons keep full label width and the row scrolls. Touch targets get a 2.5rem min-height.
- Transcript drawer becomes a bottom sheet on mobile: full width, anchored to the bottom (62vh), rounded top, so it never covers the controls; the 20rem right-padding reservation on #lc-voice-root is dropped. Body scroll area respects env(safe-area-inset-bottom).
- Participant grid: tighter gutters on mobile and a safe-area bottom inset so the last row clears the iOS home indicator. (The grid was already single-column at narrow widths; the screen-share stage/filmstrip already use clamp()/vh and stay responsive.)

CSS + one small template restructure (wrap the control clusters + class the title/spacer); no JS, Rust, or schema change. just check, just test, just test-saas all pass; just build-css regenerated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>