Phone layout: one column, bottom tab bar, swipe for next #50

New issue

Closed

opened 2026-10-17 17:29:48 +00:00 by littlefox · 1 comment

littlefox commented

2026-10-17 17:29:48 +00:00

Owner

Today's three columns don't fit a phone.

What:

Below ~700 px wide: one column, with a bottom tab bar: Unread · Channels · Inbox · You.
The reader at full width; touch targets at least 44 px.
Swipe left in the reader = the default action (next post), like Space on a keyboard.
Desktop and wide browsers keep today's layout.

Done when:

The e2e suite also runs at a phone viewport (e.g. Playwright's Pixel 7 and iPhone 14 profiles, the latter in WebKit), and every existing spec passes there or has a phone variant.
Screenshots of the phone layout are checked by eye before handing over.
iPhone Safari's safe areas (notch, home bar) are respected (env(safe-area-inset-*)).

From docs/ROADMAP.md, 0.2 "Feels like an app".

Today's three columns don't fit a phone. What: - Below ~700 px wide: one column, with a bottom tab bar: Unread · Channels · Inbox · You. - The reader at full width; touch targets at least 44 px. - Swipe left in the reader = the default action (next post), like Space on a keyboard. - Desktop and wide browsers keep today's layout. Done when: - The e2e suite also runs at a phone viewport (e.g. Playwright's Pixel 7 and iPhone 14 profiles, the latter in WebKit), and every existing spec passes there or has a phone variant. - Screenshots of the phone layout are checked by eye before handing over. - iPhone Safari's safe areas (notch, home bar) are respected (`env(safe-area-inset-*)`). From docs/ROADMAP.md, 0.2 "Feels like an app".

littlefox added this to the 0.2: Feels like an app milestone

2026-10-17 17:29:48 +00:00

littlefox added the

area/ui

area/web

kind/feature

labels

2026-10-17 17:29:48 +00:00

littlefox referenced this issue

2026-10-17 17:54:16 +00:00

Browser tests at phone size (Chromium and WebKit) #64

littlefox referenced this issue

2026-10-17 17:54:17 +00:00

Screenshot comparison in CI #65

littlefox referenced this issue from a pull request that will close it,

2026-10-17 21:04:12 +00:00

Phone layout and browser tests at phone size #79

littlefox referenced this issue from a commit

2026-10-17 21:04:14 +00:00

Phone layout and browser tests at phone size (Chromium and WebKit)

littlefox closed this issue

2026-10-17 21:20:58 +00:00

littlefox referenced this issue from a commit

2026-10-17 22:17:07 +00:00

e2e: swipe again until a post shows; one retry in CI

littlefox commented

2026-10-17 22:51:56 +00:00

Author

Owner

Merged in #79 (CI run #119 green). Below 700 px: one column at a time with a bottom tab bar (Läs, Olästa, Folk), icon top bar, full-width default action, swipe left = default action, safe-area padding. phone.spec.ts checks the tab bar, no sideways overflow and the swipe (Android). Channels/Inbox tabs come with those views (0.3/0.4).