Board on phones: the sections stacked one under another #844

New issue

Closed

opened 2026-10-10 16:01:19 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-10 16:01:19 +00:00

Owner

On phones and vertical screens, the board's accordion should stack its sections vertically.

What exists today

templates/applications/partials/board.html:116: one horizontally scrolling grid (grid-flow-col) at every width, in a bounded .board-box that scrolls both ways (#652, app.css:974-977). An open column is w-[calc(100vw-4rem)] sm:w-72; a folded one is a strip with its name written vertically ([writing-mode:vertical-rl], :170). On phones, app.css:1502-1520 snaps each column to the centre — a swipe moves a column.
app.js is built for the horizontal axis: the fold animation by width (:1426-1476), centring by scrollLeft (~:1222-1255, :1511-1551), keeping scrollLeft across a move (:1078, :1101, :1385, :1413), auto-scroll at the edges while dragging (:756-813).

What would change

Below sm: sections in one column, full width, strip titles written horizontally, the page scrolling rather than a nested box, sticky section headings against --header-height.
The horizontal-only script paths gain a vertical branch (or are skipped below sm); dragging scrolls the page.

Decisions

Breakpoint. Recommended: below sm (40 rem), the same as the phone snap rule it replaces.
Folded sections become one-line headers that open in place. Recommended.

Tests that assume the horizontal box: tests/e2e/test_board_fold.py, notably :1244-1455 and :418.

Checked against main at 8c3d03570. From the maintainer's improvements list of 2026-10-07.

On phones and vertical screens, the board's accordion should stack its sections vertically. ## What exists today - `templates/applications/partials/board.html:116`: one horizontally scrolling grid (`grid-flow-col`) at every width, in a bounded `.board-box` that scrolls both ways (#652, `app.css:974-977`). An open column is `w-[calc(100vw-4rem)] sm:w-72`; a folded one is a strip with its name written vertically (`[writing-mode:vertical-rl]`, `:170`). On phones, `app.css:1502-1520` snaps each column to the centre — *a swipe moves a column*. - `app.js` is built for the horizontal axis: the fold animation by width (`:1426-1476`), centring by `scrollLeft` (`~:1222-1255`, `:1511-1551`), keeping `scrollLeft` across a move (`:1078`, `:1101`, `:1385`, `:1413`), auto-scroll at the edges while dragging (`:756-813`). ## What would change - Below `sm`: sections in one column, full width, strip titles written horizontally, the page scrolling rather than a nested box, sticky section headings against `--header-height`. - The horizontal-only script paths gain a vertical branch (or are skipped below `sm`); dragging scrolls the page. ## Decisions - **Breakpoint.** Recommended: below `sm` (40 rem), the same as the phone snap rule it replaces. - **Folded sections** become one-line headers that open in place. Recommended. Tests that assume the horizontal box: `tests/e2e/test_board_fold.py`, notably `:1244-1455` and `:418`. Checked against `main` at `8c3d03570`. From the maintainer's improvements list of 2026-10-07.

tiagoagueda added this to the 0.6.0 milestone

2026-10-10 16:01:19 +00:00

tiagoagueda added the

enhancement

interface

labels

2026-10-10 16:01:19 +00:00

tiagoagueda modified the milestone from 0.6.0 to 0.5.0

2026-10-25 17:02:40 +00:00

tiagoagueda referenced this issue from a commit

2026-10-27 16:14:17 +00:00

Stack the board's sections on a phone (#844)