Postulo/postulo

Fork 0

The dashboard arrange page scrolls sideways at 320 pixels, and in five languages on any machine #165

New issue

Closed

opened 2026-09-10 08:52:38 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-09-10 08:52:38 +00:00

Owner

Observation

The browser job fails the reflow check:

1 element(s) push the page sideways at 320px (WCAG 2.2 SC 1.4.10 Reflow):
    /settings/dashboard/
      295px wide, 8px over  <div class="flex shrink-0 items-center gap-2"> <div class="grid grid-cols-3 gap-1"> ...

Why it passed locally

I measured the arrange page at 320px with the same fixture. On the Windows machine this work was
done on, the widest row is Where things stand, whose button reads "Take Where things stand
off". Its action group is 280px wide and ends at 313px: 7px of slack. The CI runner draws
the same text 15px wider (295px), which puts it 8px over.

The difference is fonts. --font-sans names "Inter var" first, but no Inter is shipped — there
is no @font-face and no font file — so every width in the interface is whatever the viewer's
system substitutes: Segoe UI on Windows, a wider fallback on the Linux runner. #74 is the open
issue about declared-but-undrawn fonts, and this is one more reason it matters.

It is not a font quirk

The reflow suite checks English only. I set the account's interface language and measured the
same page on the machine where English passes:

Language	Page scrolls sideways by
English, Portuguese, Polish	0 px
Finnish	3 px
French	6 px
Dutch	11 px
German	31 px
Greek	64 px

Two things overflow, and they have the same shape: a shrink-0 container holding a button
whose text includes a translated widget name, so neither the container nor the words can give
way.

The arrow cluster with Take … off — <div class="flex shrink-0 items-center gap-2"> on
each chosen row. It came with the four directions (#124, 23ac44d7).
The Add … form in the Not shown lists — <form method="post" class="shrink-0">. This
one is older (#44, dae75d8a), so the released versions overflow in German and Greek too.

An arrange page that makes a German reader scroll sideways on a phone fails SC 1.4.10 whatever
fonts CI happens to have.

The Suggestions widget is registered with label="" on purpose, because it draws its own
heading on the dashboard. On the arrange page, that empty label is used in three places that need
a name:

the visible name falls back to the raw key, suggestions, untranslated;
its button reads "Take off", with the name missing;
its four arrow buttons announce "Move up a row", "Move one place later" and so on. Somebody
using a screen reader hears four buttons that do not say what they move — the thing #124 set out
to guarantee.

It belongs in this issue because it constrains the fix. The obvious way to shorten the row is a
visible "Take off" with the widget's name in the accessible name only, and that needs every
widget to have a name.

What fixing it is

Let the groups wrap, rather than tightening the words. Drop shrink-0 from both containers
and let the action group flex-wrap. Then a long name in a long language moves the button onto
the next line instead of past the edge. Any fix that depends on the words fitting breaks with
the next translation.
Give every widget a name the arrange page can use — a name separate from the heading, or
a required label that the dashboard is free to hide — and use it for the visible name, the
Take and Add buttons, and the four arrows. row.widget.label|default:row.widget.key shows a
code to people and should go.
Make the reflow check run in more than English. Running it in the widest-rendering
languages — Greek and German, on this evidence — is what would have caught this on any machine.
The full walk takes about a minute per language, so a subset of pages in a subset of languages
rather than the full matrix.

Worth being careful about

Trust CI's fonts here, not a laptop's. Until #74 ships a font, the runner's fallback is
closer to what a Linux or Android reader sees than Segoe UI is.
Target size still applies (SC 2.5.8, #115) to whatever the buttons become: wrapping must not
shrink them below 24×24.

Classification

Bug, accessibility. Blocks CI, and so the 0.3.0 release.

## Observation The `browser` job fails the reflow check: ``` 1 element(s) push the page sideways at 320px (WCAG 2.2 SC 1.4.10 Reflow): /settings/dashboard/ 295px wide, 8px over <div class="flex shrink-0 items-center gap-2"> <div class="grid grid-cols-3 gap-1"> ... ``` ## Why it passed locally I measured the arrange page at 320px with the same fixture. On the Windows machine this work was done on, the widest row is *Where things stand*, whose button reads **"Take Where things stand off"**. Its action group is 280px wide and ends at 313px: **7px of slack**. The CI runner draws the same text 15px wider (295px), which puts it 8px over. The difference is fonts. `--font-sans` names `"Inter var"` first, but no Inter is shipped — there is no `@font-face` and no font file — so every width in the interface is whatever the viewer's system substitutes: Segoe UI on Windows, a wider fallback on the Linux runner. #74 is the open issue about declared-but-undrawn fonts, and this is one more reason it matters. ## It is not a font quirk The reflow suite checks English only. I set the account's interface language and measured the same page **on the machine where English passes**: | Language | Page scrolls sideways by | | --- | --- | | English, Portuguese, Polish | 0 px | | Finnish | 3 px | | French | 6 px | | Dutch | 11 px | | German | 31 px | | Greek | 64 px | Two things overflow, and they have the same shape: **a `shrink-0` container holding a button whose text includes a translated widget name**, so neither the container nor the words can give way. 1. **The arrow cluster with *Take … off*** — `<div class="flex shrink-0 items-center gap-2">` on each chosen row. It came with the four directions (#124, `23ac44d7`). 2. **The *Add …* form in the *Not shown* lists** — `<form method="post" class="shrink-0">`. This one is older (#44, `dae75d8a`), so **the released versions overflow in German and Greek too**. An arrange page that makes a German reader scroll sideways on a phone fails SC 1.4.10 whatever fonts CI happens to have. ## Found while measuring: a widget with no name The *Suggestions* widget is registered with `label=""` on purpose, because it draws its own heading on the dashboard. On the arrange page, that empty label is used in three places that need a name: - **the visible name** falls back to the raw key, `suggestions`, untranslated; - **its button reads "Take off"**, with the name missing; - **its four arrow buttons announce "Move up a row"**, "Move one place later" and so on. Somebody using a screen reader hears four buttons that do not say what they move — the thing #124 set out to guarantee. It belongs in this issue because it constrains the fix. The obvious way to shorten the row is a visible "Take off" with the widget's name in the accessible name only, and that needs every widget to *have* a name. ## What fixing it is - **Let the groups wrap, rather than tightening the words.** Drop `shrink-0` from both containers and let the action group `flex-wrap`. Then a long name in a long language moves the button onto the next line instead of past the edge. Any fix that depends on the words fitting breaks with the next translation. - **Give every widget a name the arrange page can use** — a `name` separate from the heading, or a required `label` that the dashboard is free to hide — and use it for the visible name, the *Take* and *Add* buttons, and the four arrows. `row.widget.label|default:row.widget.key` shows a code to people and should go. - **Make the reflow check run in more than English.** Running it in the widest-rendering languages — Greek and German, on this evidence — is what would have caught this on any machine. The full walk takes about a minute per language, so a subset of pages in a subset of languages rather than the full matrix. ## Worth being careful about - **Trust CI's fonts here, not a laptop's.** Until #74 ships a font, the runner's fallback is closer to what a Linux or Android reader sees than Segoe UI is. - **Target size still applies** (SC 2.5.8, #115) to whatever the buttons become: wrapping must not shrink them below 24×24. ## Classification Bug, accessibility. Blocks CI, and so the 0.3.0 release.

tiagoagueda added this to the 0.3.0 milestone

2026-09-10 08:52:38 +00:00

tiagoagueda added the

labels

2026-09-10 08:52:38 +00:00

tiagoagueda referenced this issue from a commit

2026-09-10 10:22:27 +00:00

Let rows give way on a phone, in every language, and name every widget

tiagoagueda referenced this issue

2026-09-10 11:16:07 +00:00

The accessibility walk claims 35 pages it never opens, and two it opens empty run off a phone once they have something on them #167

tiagoagueda referenced this issue

2026-09-10 11:16:29 +00:00

A CV's page says “What is on this cv”, and lowercases the noun in every language #168

tiagoagueda referenced this issue

2026-09-10 11:33:48 +00:00

The compiled stylesheet is three utilities behind, and the report page is missing two #164

tiagoagueda commented

2026-09-10 11:34:34 +00:00

Author

Owner

Done in e7e1540c. The browser job is green on it (run 273) and on the latest run (276), walks in Greek and German included.

The fix, and where else it applied

As proposed: let the groups wrap rather than tighten the words. The shrink-0 groups are flex-wrap, and the words beside them claim twelve rem before anything may sit next to them (grow basis-48). On a phone the buttons go underneath; on a wide screen nothing moves. I checked the arrange, account and industries pages at desktop width by screenshot.

Measuring with a font as wide as the runner's (Verdana forced, ≈ DejaVu Sans) found the same row in more places. All got the same fix:

the arrange page (every list on it) and the interview list, as reported;
the account page's five rows (Dutch, French and German ran off the edge);
the four list headings that did not wrap (invitations, tags, industries, career preview), of which the invitations one ran off the edge in Dutch. The other five already wrapped;
the career overview's entry rows.

A second failure the check could not see

Looking at the result showed words squeezed out of their own space where the buttons did fit: a column one word wide on the arrange page, with the longest written across the arrows; 14 px for a career entry in Greek; 6 px for each built-in plugin's description on Plugins, in English. Nothing scrolls, so nothing failed. The walk now also asks every box that holds text whether its words fit inside it (SPILLS in tests/e2e/test_reflow.py). It uses checkVisibility, so the inside of a closed <details> is not measured.

Walking in Greek with the catalogues compiled found two more:

The recovery page's table scrolled 12 px. Its hidden Actions label escaped a bare overflow-x-auto box. It is the #113 trap, which scroll-x exists to prevent. The report had the same. Both use scroll-x, and the template lint now refuses a bare scroll utility.
A heading word wider than a phone: Wiederherstellungslink at text-2xl is 300 px in a 288 px column. Headings get overflow-wrap: break-word, which changes nothing for a heading whose words fit.

The log file's path gets wrap-anywhere, as the plugins page's path already had.

Widget has a name for where a widget is referred to rather than headed, and called is what every sentence about one says. The arrange page, the Take … off and Add … buttons, the four arrows, the line after a move and the new-widget notice all use it. register() refuses a widget with neither a label nor a name. The suggestions widget is Suggestions from plugins, filled in the 39 European catalogues and flagged draft. I kept the visible Take … off wording with the full name: once the group wraps, it has room.

Your "worth being careful about" points

Trust CI's fonts, not a laptop's. Run with a Verdana-wide font at 320 px, every page is clean in English, Greek, German, Dutch, French and Finnish. At 300 px, 20 below the criterion, the one thing over is the companies search field, by 4 px, the same in all six, so it is a fixed width rather than a translation. CI agreed at 320.
Target size. Wrapping moves buttons rather than shrinking them, and the target-size suite passes.

Tests

The reflow walk runs in English, Greek and German. On the old templates it fails in both of the others on any machine: Greek names five culprits, German two.
Seven unit tests for widget names and the arrange page, among them one that no group on it is shrink-0.
A template lint rule against bare scroll utilities.

Found while here, and filed

#167: the walk opens /applications/suggestions/, /jobs/captures/ and /documents/cvs/ empty. With content, the suggestions page runs off a phone in English (45 px) and a CV's page in Greek and German. Worse, 35 of the 104 pages the suite claims to check are opened by no test.
#168: a CV's page reads What is on this cv, and lowercases the noun in every language.

Done in `e7e1540c`. The browser job is green on it (run 273) and on the latest run (276), **walks in Greek and German included**. ## The fix, and where else it applied As proposed: **let the groups wrap rather than tighten the words.** The `shrink-0` groups are `flex-wrap`, and the words beside them claim twelve rem before anything may sit next to them (`grow basis-48`). On a phone the buttons go underneath; on a wide screen nothing moves. I checked the arrange, account and industries pages at desktop width by screenshot. Measuring with a font as wide as the runner's (Verdana forced, ≈ DejaVu Sans) found the same row in more places. All got the same fix: - the arrange page (every list on it) and the interview list, as reported; - the account page's five rows (Dutch, French and German ran off the edge); - the four list headings that did not wrap (invitations, tags, industries, career preview), of which the invitations one ran off the edge in Dutch. The other five already wrapped; - the career overview's entry rows. ## A second failure the check could not see Looking at the result showed words **squeezed out of their own space** where the buttons *did* fit: a column one word wide on the arrange page, with the longest written across the arrows; **14 px** for a career entry in Greek; **6 px** for each built-in plugin's description on *Plugins*, in English. Nothing scrolls, so nothing failed. The walk now also asks every box that holds text whether its words fit inside it (`SPILLS` in `tests/e2e/test_reflow.py`). It uses `checkVisibility`, so the inside of a closed `<details>` is not measured. Walking in Greek with the catalogues compiled found two more: - **The recovery page's table scrolled 12 px.** Its hidden *Actions* label escaped a bare `overflow-x-auto` box. It is the #113 trap, which `scroll-x` exists to prevent. The report had the same. Both use `scroll-x`, and the template lint now refuses a bare scroll utility. - **A heading word wider than a phone:** *Wiederherstellungslink* at `text-2xl` is 300 px in a 288 px column. Headings get `overflow-wrap: break-word`, which changes nothing for a heading whose words fit. The log file's path gets `wrap-anywhere`, as the plugins page's path already had. ## The widget with no name `Widget` has a `name` for where a widget is *referred to* rather than headed, and `called` is what every sentence about one says. The arrange page, the *Take … off* and *Add …* buttons, the four arrows, the line after a move and the new-widget notice all use it. **`register()` refuses a widget with neither a label nor a name.** The suggestions widget is *Suggestions from plugins*, filled in the 39 European catalogues and flagged `draft`. I kept the visible *Take … off* wording with the full name: once the group wraps, it has room. ## Your "worth being careful about" points - **Trust CI's fonts, not a laptop's.** Run with a Verdana-wide font at 320 px, every page is clean in English, Greek, German, Dutch, French and Finnish. At 300 px, 20 below the criterion, the one thing over is the companies search field, by 4 px, the same in all six, so it is a fixed width rather than a translation. CI agreed at 320. - **Target size.** Wrapping moves buttons rather than shrinking them, and the target-size suite passes. ## Tests - The reflow walk runs in **English, Greek and German**. On the old templates it fails in both of the others on any machine: Greek names five culprits, German two. - Seven unit tests for widget names and the arrange page, among them one that no group on it is `shrink-0`. - A template lint rule against bare scroll utilities. ## Found while here, and filed - #167: the walk opens `/applications/suggestions/`, `/jobs/captures/` and `/documents/cvs/` empty. With content, **the suggestions page runs off a phone in English** (45 px) and a CV's page in Greek and German. Worse, 35 of the 104 pages the suite claims to check are opened by no test. - #168: a CV's page reads *What is on this cv*, and lowercases the noun in every language.

tiagoagueda closed this issue

2026-09-10 11:34:57 +00:00

tiagoagueda referenced this issue

2026-09-12 09:11:00 +00:00

Twenty-four languages are translated before anybody has read the English once #182

tiagoagueda referenced this issue from a commit

2026-09-12 09:16:55 +00:00

Translate twenty-four languages at a release, not at every commit

tiagoagueda referenced this issue from a commit

2026-09-12 12:41:27 +00:00

Derive the coverage claim from the walk, and fix what that found

tiagoagueda referenced this issue from a commit