Donate to Postulo/postulo

• https://buymeacoffee.com/tiagoagueda

---

See the documentation for more details on donation links.

Let the navigation underline setting reach the board's column names; Stack the board's sections on a phone (#843, #844) #1067

Merged

tiagoagueda merged 2 commits from 843-844-board into main 2026-10-27 22:45:17 +00:00

Conversation 0 Commits 2 Files changed 98 +1125 -574

tiagoagueda commented 2026-10-27 16:22:19 +00:00

Owner

• Copy link
• Copy Markdown

The accessibility setting "Underline the page you are on" becomes "Underline links in
navigation". Turned off, it still drops the underline from the header's current link,
and now also from the board's column names, which underlined under the pointer whatever
the setting said. Those names are the board's navigation: each folds or opens it. A
card's title keeps its hover underline, being a link in the content. One setting rather
than a second one, as the issue recommended.

The new rule is in @layer utilities: the template's hover:underline is a utility,
and nothing in components beats a utility whatever its specificity. Forced colours
leave it alone, since a hover underline is not the only cue of anything.

The label, help text and verbose name are new strings (migration 0048 records the
verbose name). Tests: the settings page's label, the rule's layer, and a browser test
hovering a column name and a card title with the setting on and off.

Closes #843

Below sm (40rem) the Applications board was one horizontally scrolling grid in a box
that scrolled both ways and snapped to a column: a box inside the page on a screen too
small for one. Now its sections stack in one column, each the page's width, in the order
of the statuses. The box no longer clips or scrolls there, so the page scrolls, and a
section's heading sticks under the masthead (--header-height, 4.25rem without a
script). A folded section is a one-line header, its name written across with its count
at the end. Every phone class is a max-sm: one, or an sm: one where the phone goes
without, so from sm up the board is drawn as before. The snap rule is gone.

The script's sideways paths ask boardStacked(box), read from the box's computed
grid-auto-flow, so the stylesheet and the script agree about the line:

• a held card scrolls the page, in the same band, between the masthead and the bar of
  navigation fixed to the window's foot;
• a move keeps the page's place across the load it makes, as it kept the box's;
• centring by scrollLeft stands down;
• the fold's motion goes by height and row gap instead of width and column gap, and the
  pressed heading is held where it was on the screen while the sections above it open or
  fold, so a section opens in place. A long column's heading, stuck under the masthead
  and pressed, stays there.

Browser tests: the phone-width tests that assumed the horizontal box now check the
stacked layout (with and without scripts), opening in place (with and without reduced
motion), the page's place across a move and the page scrolling under a held card. The
centring tests that ran at a phone width run in the narrowest box, 640, with two columns
open, since one open column fits from sm up.

Closes #844

Notes for review

• #843:
  • The setting is now "Underline links in navigation". It covers the header's current link and the board's column names on hover; card titles keep theirs.
  • Migration accounts 0048_alter_profile_nav_underline changes the verbose name only. #878 also adds an accounts 0048, so whichever lands second is renumbered.
• #844:
  • Below sm the sections stack and the page scrolls. Headings stick under the header, and folded sections are one-line headers that open in place.
  • Desktop markup is unchanged.
  • Two centring tests moved from 390 to 640 px, because from sm up one open column always fits.
• Doubts:
  • On phones the board keeps tabindex="0" and role="region" though it no longer scrolls, so it is a tab stop with nothing to scroll.
  • The wiki's images/board-phone.png shows the old layout and needs retaking.
• Tests: tests/e2e/test_board_fold.py in full, 82 passed.

🤖 Generated with Claude Code

The accessibility setting "Underline the page you are on" becomes "Underline links in navigation". Turned off, it still drops the underline from the header's current link, and now also from the board's column names, which underlined under the pointer whatever the setting said. Those names are the board's navigation: each folds or opens it. A card's title keeps its hover underline, being a link in the content. One setting rather than a second one, as the issue recommended. The new rule is in `@layer utilities`: the template's `hover:underline` is a utility, and nothing in `components` beats a utility whatever its specificity. Forced colours leave it alone, since a hover underline is not the only cue of anything. The label, help text and verbose name are new strings (migration 0048 records the verbose name). Tests: the settings page's label, the rule's layer, and a browser test hovering a column name and a card title with the setting on and off. Closes #843 Below `sm` (40rem) the Applications board was one horizontally scrolling grid in a box that scrolled both ways and snapped to a column: a box inside the page on a screen too small for one. Now its sections stack in one column, each the page's width, in the order of the statuses. The box no longer clips or scrolls there, so the page scrolls, and a section's heading sticks under the masthead (`--header-height`, 4.25rem without a script). A folded section is a one-line header, its name written across with its count at the end. Every phone class is a `max-sm:` one, or an `sm:` one where the phone goes without, so from `sm` up the board is drawn as before. The snap rule is gone. The script's sideways paths ask `boardStacked(box)`, read from the box's computed grid-auto-flow, so the stylesheet and the script agree about the line: - a held card scrolls the page, in the same band, between the masthead and the bar of navigation fixed to the window's foot; - a move keeps the page's place across the load it makes, as it kept the box's; - centring by `scrollLeft` stands down; - the fold's motion goes by height and row gap instead of width and column gap, and the pressed heading is held where it was on the screen while the sections above it open or fold, so a section opens in place. A long column's heading, stuck under the masthead and pressed, stays there. Browser tests: the phone-width tests that assumed the horizontal box now check the stacked layout (with and without scripts), opening in place (with and without reduced motion), the page's place across a move and the page scrolling under a held card. The centring tests that ran at a phone width run in the narrowest box, 640, with two columns open, since one open column fits from `sm` up. Closes #844 ## Notes for review - **#843:** - The setting is now "Underline links in navigation". It covers the header's current link and the board's column names on hover; card titles keep theirs. - Migration `accounts 0048_alter_profile_nav_underline` changes the verbose name only. #878 also adds an `accounts 0048`, so whichever lands second is renumbered. - **#844:** - Below `sm` the sections stack and the page scrolls. Headings stick under the header, and folded sections are one-line headers that open in place. - Desktop markup is unchanged. - Two centring tests moved from 390 to 640 px, because from `sm` up one open column always fits. - **Doubts:** - On phones the board keeps `tabindex="0"` and `role="region"` though it no longer scrolls, so it is a tab stop with nothing to scroll. - The wiki's `images/board-phone.png` shows the old layout and needs retaking. - **Tests:** `tests/e2e/test_board_fold.py` in full, 82 passed. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

tiagoagueda added 2 commits 2026-10-27 16:22:19 +00:00

Let the navigation underline setting reach the board's column names (#843) ... f902d25d3c

The accessibility setting "Underline the page you are on" becomes "Underline links in
navigation". Turned off, it still drops the underline from the header's current link,
and now also from the board's column names, which underlined under the pointer whatever
the setting said. Those names are the board's navigation: each folds or opens it. A
card's title keeps its hover underline, being a link in the content. One setting rather
than a second one, as the issue recommended.

The new rule is in `@layer utilities`: the template's `hover:underline` is a utility,
and nothing in `components` beats a utility whatever its specificity. Forced colours
leave it alone, since a hover underline is not the only cue of anything.

The label, help text and verbose name are new strings (migration 0048 records the
verbose name). Tests: the settings page's label, the rule's layer, and a browser test
hovering a column name and a card title with the setting on and off.

Closes #843

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

Below `sm` (40rem) the Applications board was one horizontally scrolling grid in a box
that scrolled both ways and snapped to a column: a box inside the page on a screen too
small for one. Now its sections stack in one column, each the page's width, in the order
of the statuses. The box no longer clips or scrolls there, so the page scrolls, and a
section's heading sticks under the masthead (`--header-height`, 4.25rem without a
script). A folded section is a one-line header, its name written across with its count
at the end. Every phone class is a `max-sm:` one, or an `sm:` one where the phone goes
without, so from `sm` up the board is drawn as before. The snap rule is gone.

The script's sideways paths ask `boardStacked(box)`, read from the box's computed
grid-auto-flow, so the stylesheet and the script agree about the line:

- a held card scrolls the page, in the same band, between the masthead and the bar of
  navigation fixed to the window's foot;
- a move keeps the page's place across the load it makes, as it kept the box's;
- centring by `scrollLeft` stands down;
- the fold's motion goes by height and row gap instead of width and column gap, and the
  pressed heading is held where it was on the screen while the sections above it open or
  fold, so a section opens in place. A long column's heading, stuck under the masthead
  and pressed, stays there.

Browser tests: the phone-width tests that assumed the horizontal box now check the
stacked layout (with and without scripts), opening in place (with and without reduced
motion), the page's place across a move and the page scrolling under a held card. The
centring tests that ran at a phone width run in the narrowest box, 640, with two columns
open, since one open column fits from `sm` up.

Closes #844

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tiagoagueda force-pushed 843-844-board from 382007466d to e7d970f6dc 2026-10-27 22:36:04 +00:00 Compare

tiagoagueda merged commit 903f7acba4 into main 2026-10-27 22:45:17 +00:00

tiagoagueda referenced this pull request from a commit 2026-10-27 22:45:18 +00:00

Let the navigation underline setting reach the board's column names, and stack the board's sections on a phone (#843, #844) (#1067)

tiagoagueda deleted branch 843-844-board 2026-10-27 22:45:21 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

accessibility

Usable by everyone, including people with disabilities: one of the project's stated missions

  

authentication

Signing in, and proving who you are

  

breaking change

Changes behaviour or data in a way operators must act on

  

bug

Something does not do what it says it does

  

documentation

The wiki, the docs, or the words in the interface

  

enhancement

An improvement or a new capability

  

interface

The shape of the pages: what is where, and how it reads

  

internationalisation

Languages, regions, and the formats and symbols that go with them

  

observability

What an operator can see about a running instance: metrics, logs, health

  

performance

Uses fewer resources, or is more reliable, with no loss of features or accessibility

  

security

Keeping the code and the data secure: one of the project's stated missions

  

tier

1

Easy: small, self-contained, no prerequisites

  

tier

2

High-severity security: account access, personal data, the boundaries

  

tier

3

Foundations: prerequisite work that unblocks other issues

  

tier/4

Later: large features and long-horizon work

No labels

accessibility

authentication

breaking change

bug

documentation

enhancement

interface

internationalisation

observability

performance

security

tier

1

tier

2

tier

3

tier/4

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

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

Postulo/postulo!1067

No description provided.