Phone layout and browser tests at phone size #79

Merged

littlefox merged 3 commits from issue-64-phone-tests into main

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

littlefox commented

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

Owner

Closes #50
Closes #64

Phone layout: 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. Desktop unchanged.

Tests: every spec runs for desktop (Chromium), Android (Pixel 7) and iPhone (iPhone 14, WebKit), each against its own seeded lyskomd. CI adds lyskomd-android and lyskomd-iphone services. 115/115 locally.

The issue planned Channels and Inbox tabs; those views don't exist yet (0.3/0.4), so the tabs are Läs/Olästa/Folk for now (DESIGN.md).

🤖 Generated with Claude Code

https://claude.ai/code/session_01XJW2ocwLunyaLiUwCBHEP8

Closes #50 Closes #64 Phone layout: 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. Desktop unchanged. Tests: every spec runs for desktop (Chromium), Android (Pixel 7) and iPhone (iPhone 14, WebKit), each against its own seeded lyskomd. CI adds lyskomd-android and lyskomd-iphone services. 115/115 locally. The issue planned Channels and Inbox tabs; those views don't exist yet (0.3/0.4), so the tabs are Läs/Olästa/Folk for now (DESIGN.md). 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01XJW2ocwLunyaLiUwCBHEP8

littlefox added 3 commits

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

WIP: e2e profiles for desktop, Android and iPhone (#64 ) 61e8a05eb3

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XJW2ocwLunyaLiUwCBHEP8

Merge remote-tracking branch 'origin/main' into issue-64-phone-tests 8c563c412b

# Conflicts:
#	e2e/tests/faq.spec.ts
#	e2e/tests/i18n.spec.ts
#	e2e/tests/imported.spec.ts
#	e2e/tests/messages.spec.ts
#	e2e/tests/scroll.spec.ts

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

ci / check (push) Successful in 6m40s

Details

ci / desktop (push) Successful in 8m31s

Details

ci / e2e (push) Successful in 16m17s

Details

a2a2988ba5

Phone layout (#50): below 700 px the screen shows one column at a
time, chosen with a bottom tab bar (Läs, Olästa, Folk). Actions that
show something in the reader switch to Läs. The top bar's buttons
become icons (their text stays the accessible name), the default
action is full width, a swipe left in the reader does what Space
does, and notches and home bars are padded for. Channels and Inbox
tabs come with those views in 0.3/0.4. Desktop is unchanged.

Phone-size tests (#64): tools/e2e.sh runs every spec for desktop
(Chromium), Android (Pixel 7, Chromium) and iPhone (iPhone 14,
WebKit). Each profile has its own seeded lyskomd, relays and static
server on its own loopback address, since the specs change server
state; the app finds its relay on the page's host. CI gets two more
lyskomd services, forwarded to 127.0.0.1 because the test certificate
doesn't name them. tab() switches tabs before using a side column,
shot() files screenshots per profile, and phone.spec.ts checks the
tab bar, no sideways overflow, and the swipe (Android).

115 tests pass locally across the three profiles.

Refs #50, #64

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XJW2ocwLunyaLiUwCBHEP8