Fix responsive layout sweep failures across modes #168

Open
opened 2026-09-26 12:07:00 +00:00 by kayg · 3 comments
Owner

This issue follows the post-merge responsive layout sweep run for #150 on 2026-09-26.

Command: cd apps/web && bun e2e/layout-sweep.mjs

The sweep checked 168 screens and reported repeatable, non-load failures across shared surfaces:

  • Mode tray touch targets: button.seg-btn.island-segment paints 50×44, but tested 44×44 target corners land on content beneath the tray. This affects Ask at 390 px and 320 px, and repeats across Calendar, Files, Photos, Notes and tags.
  • Header collapse: on desktop and mobile, several routes fail to collapse or expand after scrolling. In the Ask cases, the collapsed blur remains at 0, the row does not move, and the title does not shrink (header collapse ask 1440; header collapse ask 390).
  • Toast placement at 200% zoom: at a 720 px viewport, the toast is off the tray dock (bottom 44 px, centre 0) on Files and Calendar.
  • Calendar log-entry touch target: the Week log-entry button is 42 px wide at 390 px, below the 44 px touch target requirement.

The same sweep also reports duplicate icons in the Settings → Account and Settings → AI lists. The complete run is recorded at target/tmp/layout-final.log in the #150 worktree.

Please fix the shared tray/header/toast behavior and the Calendar target, and add focused regression coverage. The Ask page itself passed its dedicated real-server e2e; these failures reproduce on other routes and belong to shared UI or Calendar surfaces.

This issue follows the post-merge responsive layout sweep run for #150 on 2026-09-26. Command: `cd apps/web && bun e2e/layout-sweep.mjs` The sweep checked 168 screens and reported repeatable, non-load failures across shared surfaces: - **Mode tray touch targets:** `button.seg-btn.island-segment` paints 50×44, but tested 44×44 target corners land on content beneath the tray. This affects Ask at 390 px and 320 px, and repeats across Calendar, Files, Photos, Notes and tags. - **Header collapse:** on desktop and mobile, several routes fail to collapse or expand after scrolling. In the Ask cases, the collapsed blur remains at 0, the row does not move, and the title does not shrink (`header collapse ask 1440`; `header collapse ask 390`). - **Toast placement at 200% zoom:** at a 720 px viewport, the toast is off the tray dock (bottom 44 px, centre 0) on Files and Calendar. - **Calendar log-entry touch target:** the Week log-entry button is 42 px wide at 390 px, below the 44 px touch target requirement. The same sweep also reports duplicate icons in the Settings → Account and Settings → AI lists. The complete run is recorded at `target/tmp/layout-final.log` in the #150 worktree. Please fix the shared tray/header/toast behavior and the Calendar target, and add focused regression coverage. The Ask page itself passed its dedicated real-server e2e; these failures reproduce on other routes and belong to shared UI or Calendar surfaces.
Author
Owner

Post-merge focused check against the current dev merge (32f9d1a9):

Command: cd apps/web && bun e2e/layout-sweep.mjs --only ask

The run completed with checked 8 screens and exit code 1:

checked 8 screens
FAIL ask 390 open paper: hit area li.row.svelte-1c1kjnz "Calendar" is under 44×44 (355×43 painted; -21,21 hits li.row.svelte-1c1kjnz); hit area li.row.svelte-1c1kjnz "Files" is under 44×44 (355×43 painted; -21,21 hits li.row.svelte-1c1kjnz); hit area li.row.svelte-1c1kjnz "Photos" is under 44×44 (355×43 painted; -21,21 hits li.row.svelte-1c1kjnz)
FAIL ask-mode 390 collapsed paper: hit area button.seg-btn.island-segment "Files" is under 44×44 (50×44 painted; -21,-21 hits div.route-content)

A full 168-screen post-merge run was stopped after 20 minutes to limit shared-host load. It exited during interruption, before it produced a valid sweep result; do not count it as a pass or failure.

Post-merge focused check against the current `dev` merge (`32f9d1a9`): Command: `cd apps/web && bun e2e/layout-sweep.mjs --only ask` The run completed with `checked 8 screens` and exit code 1: ```text checked 8 screens FAIL ask 390 open paper: hit area li.row.svelte-1c1kjnz "Calendar" is under 44×44 (355×43 painted; -21,21 hits li.row.svelte-1c1kjnz); hit area li.row.svelte-1c1kjnz "Files" is under 44×44 (355×43 painted; -21,21 hits li.row.svelte-1c1kjnz); hit area li.row.svelte-1c1kjnz "Photos" is under 44×44 (355×43 painted; -21,21 hits li.row.svelte-1c1kjnz) FAIL ask-mode 390 collapsed paper: hit area button.seg-btn.island-segment "Files" is under 44×44 (50×44 painted; -21,-21 hits div.route-content) ``` A full 168-screen post-merge run was stopped after 20 minutes to limit shared-host load. It exited during interruption, before it produced a valid sweep result; do not count it as a pass or failure.
Author
Owner

The production menu screenshot pass for #176 rechecked the merged dev tree with bun e2e/layout-sweep.mjs --only menu- --screenshots …/menu-icons/screens/menus. It captured 176 screens and exited 1 with eight failures, all the same Analytics card inset result:

  • menu-analytics-title and menu-analytics-overflow
  • 1440 px and 390 px, open and collapsed, Paper theme
  • Four controls in each case measured 12 px from the card edge; the sweep expects 18 px.

No other menu screen failed. The screenshots are available at /home/kayg/.local/state/codex-jobs/calternal/menu-icons/screens/menus. This is outside #176's menu-icon change, so I left the Analytics layout unchanged.

The production menu screenshot pass for #176 rechecked the merged `dev` tree with `bun e2e/layout-sweep.mjs --only menu- --screenshots …/menu-icons/screens/menus`. It captured 176 screens and exited 1 with eight failures, all the same Analytics card inset result: - `menu-analytics-title` and `menu-analytics-overflow` - 1440 px and 390 px, open and collapsed, Paper theme - Four controls in each case measured 12 px from the card edge; the sweep expects 18 px. No other menu screen failed. The screenshots are available at `/home/kayg/.local/state/codex-jobs/calternal/menu-icons/screens/menus`. This is outside #176's menu-icon change, so I left the Analytics layout unchanged.
Author
Owner

Retest on 2026-09-27 with the production menu sweep. It refreshed all 176 screenshots, then exited 1 with 8 inset assertions. In menu-analytics-title and menu-analytics-overflow, Paper theme, open and collapsed states, at 1440px and 390px, these four Analytics card controls are 12px from the card's right edge; the sweep requires 18px:

  • Total tracked, up 83
  • Per active day, up 8
  • Untracked per active
  • Days active, no chan

Current screenshots: /home/kayg/.local/state/codex-jobs/calternal/menu-icons/screens/menus.

Retest on 2026-09-27 with the production menu sweep. It refreshed all 176 screenshots, then exited 1 with 8 inset assertions. In `menu-analytics-title` and `menu-analytics-overflow`, Paper theme, open and collapsed states, at 1440px and 390px, these four Analytics card controls are 12px from the card's right edge; the sweep requires 18px: - Total tracked, up 83 - Per active day, up 8 - Untracked per active - Days active, no chan Current screenshots: `/home/kayg/.local/state/codex-jobs/calternal/menu-icons/screens/menus`.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#168
No description provided.