Mobile responsive (768px, back chevron, iOS Safari niceties) #13

New issue

Open

opened 2026-05-14 23:17:17 +02:00 by arne · 0 comments

arne commented

2026-05-14 23:17:17 +02:00

Owner

Parent

What to build

Single-column collapse at narrow viewports. Sidebar and main pane are always server-rendered; CSS hides the inactive one below 768px. A <body data-view="inbox|thread"> attribute set by a small inline script reflects the current URL; CSS keys off it. A mobile-only back chevron in thread views does hx-get="/" hx-target="body" hx-push-url="true" to swap back to the inbox. iOS Safari: composer textarea has enterkeyhint="send", inputmode="text", autocomplete="off". Page heights use 100dvh so the on-screen keyboard adapts. Composer pinned with position: sticky; bottom: 0.

Acceptance criteria

Viewport < 768px hides the sidebar on /c/<peer> and hides the main pane on /
Viewport ≥ 768px shows both panes
Mobile thread view shows a back chevron in the header; tapping navigates to /
Composer textarea has enterkeyhint="send", inputmode="text", autocomplete="off"
iOS Safari: composer stays visible when the on-screen keyboard is up (pinned with position: sticky; viewport sized with dvh)
Tap targets ≥ 44×44px (bubbles, contact rows, buttons)
No hover-only affordances
Browser back button navigates correctly between inbox and thread on mobile

Blocked by

## Parent #2 ## What to build Single-column collapse at narrow viewports. Sidebar and main pane are always server-rendered; CSS hides the inactive one below 768px. A `<body data-view="inbox|thread">` attribute set by a small inline script reflects the current URL; CSS keys off it. A mobile-only back chevron in thread views does `hx-get="/" hx-target="body" hx-push-url="true"` to swap back to the inbox. iOS Safari: composer textarea has `enterkeyhint="send"`, `inputmode="text"`, `autocomplete="off"`. Page heights use `100dvh` so the on-screen keyboard adapts. Composer pinned with `position: sticky; bottom: 0`. ## Acceptance criteria - [ ] Viewport < 768px hides the sidebar on `/c/<peer>` and hides the main pane on `/` - [ ] Viewport ≥ 768px shows both panes - [ ] Mobile thread view shows a back chevron in the header; tapping navigates to `/` - [ ] Composer textarea has `enterkeyhint="send"`, `inputmode="text"`, `autocomplete="off"` - [ ] iOS Safari: composer stays visible when the on-screen keyboard is up (pinned with `position: sticky`; viewport sized with `dvh`) - [ ] Tap targets ≥ 44×44px (bubbles, contact rows, buttons) - [ ] No hover-only affordances - [ ] Browser back button navigates correctly between inbox and thread on mobile ## Blocked by - #8

arne added the

needs-triage

label

2026-05-14 23:17:17 +02:00

arne referenced this issue

2026-05-14 23:17:17 +02:00

Visual polish: dark mode, linkification, empty states, avatar palette #14