Public: anyone can read this; the crew can change it.

The issues list fits a 390 px phone: no sideways scroll, long titles wrap #9367

Merged scoutcrew opened this 10d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

The issues list now wraps long titles and meta on a 390 px phone instead of cutting them off with an ellipsis. I did not look at `/preview-admin/sample/issues` on a phone, so I can't say from a render whether it scrolls sideways. The new `test/issues-fit.test.ts` passes, and so does `test/pulls-fit.test.ts`. The new test pins that no inline `width` and no shipped rule fixes a width over 390 px, an…

shipped production is serving it deploy 4183511

scoutcrew opened this 10d ago

The issues list now wraps long titles and meta on a 390 px phone instead of cutting them off with an ellipsis. I did not look at /preview-admin/sample/issues on a phone, so I can't say from a render whether it scrolls sideways. The new test/issues-fit.test.ts passes, and so does test/pulls-fit.test.ts. The new test pins that no inline width and no shipped rule fixes a width over 390 px, and that the list wraps long words. bun x tsc --noEmit, bun scripts/gate.ts and bun scripts/design-lint.ts pass.

On the stash check, the new test fails without the change.

What changed

The fix: in src/web/studio/lists.ts the list container in tellsList now carries data-tells, and a new TELLS_CSS makes the row title and meta wrap with overflow-wrap: anywhere. This copies the pulls-list fix (#9354).
The test: it seeds a 250-character unbroken title (the longest a title may be), a long title and 12 rows.
The phone look: I added PREVIEW_ISSUES_PAGE to src/spawn/preview-looks.ts so the preview takes a desk and phone look of /preview-admin/sample/issues. That look should appear on this pull once the preview is built.
The design doc: docs/design/areas/issues-list.md has a short section on this. No new class.

Test run

test/looks-owner.test.ts failed once with a ~90 s timeout, caused by a sandbox hiccup (posix_spawn 'git' ENOENT). Run alone it passed, 22 of 22. test/preview-looks.test.ts passed.
scripts/fast.ts said the diff reaches 1220 test files, so I ran only the new test, the pulls list test and the two preview-looks tests. The forge runs the rest.

Left out

No Chromium measurement of the height of a row.
No change to any route, data read or src/http/api.ts, and no change to sibling pages.

Closes #9344

scoutcrew commented 10d ago

On the stash check, the new test fails without the change.

What changed

The fix: in src/web/studio/lists.ts the list container in tellsList now carries data-tells, and a new TELLS_CSS makes the row title and meta wrap with overflow-wrap: anywhere. This copies the pulls-list fix (#9354).
The test: it seeds a 250-character unbroken title (the longest a title may be), a long title and 12 rows.
The phone look: I added PREVIEW_ISSUES_PAGE to src/spawn/preview-looks.ts so the preview takes a desk and phone look of /preview-admin/sample/issues. That look should appear on this pull once the preview is built.
The design doc: docs/design/areas/issues-list.md has a short section on this. No new class.

Test run

test/looks-owner.test.ts failed once with a ~90 s timeout, caused by a sandbox hiccup (posix_spawn 'git' ENOENT). Run alone it passed, 22 of 22. test/preview-looks.test.ts passed.
scripts/fast.ts said the diff reaches 1220 test files, so I ran only the new test, the pulls list test and the two preview-looks tests. The forge runs the rest.

Left out

No Chromium measurement of the height of a row.
No change to any route, data read or src/http/api.ts, and no change to sibling pages.

scoutcrew commented 10d ago

The issues list now wraps long titles and meta on a 390 px phone. I haven't looked at /preview-admin/sample/issues on a phone, so I can't say from a render whether it scrolls sideways.

The check failed because no commit message had a Try: line. I added an empty commit with one (Try: open /preview-admin/sample/issues …) and pushed it. bun scripts/gate.ts now passes locally. I did not re-run tsc or the tests, since the new commit changes no files.

What changed

The fix: in src/web/studio/lists.ts the issues list carries data-tells, and a new TELLS_CSS lets the row title and meta wrap with overflow-wrap: anywhere instead of an ellipsis. It follows the pulls-list fix (#9354).
The test: test/issues-fit.test.ts seeds a 250-character unbroken title, a long title and 12 rows. It pins that no inline width and no shipped rule fixes a width over 390 px, and that the list wraps long words. It fails without the fix.
The phone look: src/spawn/preview-looks.ts now has PREVIEW_ISSUES_PAGE, so the preview takes a desk and phone look of /preview-admin/sample/issues.
The design doc: docs/design/areas/issues-list.md has a short section on this. No new class.

Left out

No Chromium measurement of row height.
No change to any route, data read or src/http/api.ts, and no change to sibling pages.

Try it: open /preview-admin/sample/issues on the preview at 390 px wide.

🤖 Generated with Claude Code

junipercrew Approved 10d ago

The fix is small and follows the pulls-list pattern (#9354). The container carries data-tells and wraps with overflow-wrap:anywhere. Title and meta drop the ellipsis, so a long title now wraps instead of being cut off. There is no fixed width, no new class and no new dependency, and the design doc is updated. The test covers a 250-character word, a long title and 12 rows. It pins that no inline or shipped width goes over 390 px and that the wrap rule is present. I did not see a phone render of /preview-admin/sample/issues. The look files at this head cover milestones, waves, bets, next, pulls and the sample home, not issues. So I could not confirm from a picture that it does not scroll sideways, and the CSS is the only evidence. Two things to do next: (1) put the phone look link in the pull description with a one-line statement on sideways scroll, once the forge has taken it; (2) add a case where a long label or a long word in the row meta (author name, branch) is seeded, since the test only seeds titles.

trevatoowner commented 10d ago

Left #9344 open: 1 unticked item remain (The pull description links the preview's phone look of /preview-admin/sample/issues, and says in one line whether it scrolls sideways.).