The header's search box drifts off centre once the account side has four links #205

New issue

Closed

opened 2026-09-18 22:44:03 +00:00 by claude-bot · 0 comments

claude-bot commented

2026-09-18 22:44:03 +00:00

Collaborator

tests/e2e/search.spec.js pins the search box to the middle of the header row at 1440px (the search box is centred on the header row, tolerance 2px). It is currently ~31px left of centre for a member who is both a board admin and a configured super-admin, which is what the dev/prod deployment's own admin is.

Measured at 1440px on a board, on main (18df361), before the home-page work:

	x	width
`.nav-lead`	28	437
`.nav-search`	481	416
`.board-user`	913	500

The centring rule (app.css, the long comment above the @media (min-width: 960px) block) gives both sides flex: 1 1 0 so they split the leftover in half — 468px each here. But a flex item cannot shrink below its min-content, and the account side's content is 500px: Board (66) + Calendar (83) + Board settings (122) + Admin/Members (~86) + the account chip (156) plus gaps. So it keeps 500, the lead gets what is left, and the box lands 31px left of the middle. The comment anticipates this ("where the account side needs more than its half … the box drifts left again rather than the links wrapping: an off-centre box beats a broken row") but the test says it should not happen at 1440.

On claude/issue-194 it is 33px, because the Admin ▾ flyout became a plain Members link and that is 2px wider — the branch makes it marginally worse, it does not cause it.

Worth deciding which is true: the row genuinely needs more than half at 1440 for this member, or the test's width is wrong. Options if it is the row: shorten the deployment link's label, drop the account chip's handle earlier, or make the box absolutely centred with the lead clipped under it (the comment explains why that was rejected once).

Filed by Claude while working on #194 (run).

`tests/e2e/search.spec.js` pins the search box to the middle of the header row at 1440px (`the search box is centred on the header row`, tolerance 2px). It is currently **~31px left of centre** for a member who is both a board admin and a configured super-admin, which is what the dev/prod deployment's own admin is. Measured at 1440px on a board, on `main` (18df361), before the home-page work: | | x | width | |---|---|---| | `.nav-lead` | 28 | 437 | | `.nav-search` | 481 | 416 | | `.board-user` | 913 | 500 | The centring rule (`app.css`, the long comment above the `@media (min-width: 960px)` block) gives both sides `flex: 1 1 0` so they split the leftover in half — 468px each here. But a flex item cannot shrink below its min-content, and the account side's content is 500px: Board (66) + Calendar (83) + Board settings (122) + Admin/Members (~86) + the account chip (156) plus gaps. So it keeps 500, the lead gets what is left, and the box lands 31px left of the middle. The comment anticipates this ("where the account side needs more than its half … the box drifts left again rather than the links wrapping: an off-centre box beats a broken row") but the test says it should not happen at 1440. On `claude/issue-194` it is 33px, because the `Admin ▾` flyout became a plain `Members` link and that is 2px wider — the branch makes it marginally worse, it does not cause it. Worth deciding which is true: the row genuinely needs more than half at 1440 for this member, or the test's width is wrong. Options if it is the row: shorten the deployment link's label, drop the account chip's handle earlier, or make the box absolutely centred with the lead clipped under it (the comment explains why that was rejected once). --- _Filed by Claude while working on #194 ([run](https://git.grandiras.net/Grandiras/claude-bot/actions/runs/561))._

claude-bot referenced this issue

2026-09-18 22:44:04 +00:00

A home page at /, and members create their own boards #194