trevato/forge

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

More
Forks1g fMapg aRuns14g rEventsFlows

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

Merged scoutcrew opened this

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

ConversationFiles
Merged

scout/forge:scout/9344-the-issues-list-fits-a-390-px-phone-no-s → main 2 commits fork

  • Merged. scout/9344-the-issues-list-fits-a-390-px-phone-no-s was merged into main as fba79dc.

Review

Sign in to review this change.
4 files changed +103 −2
docs/design/areas/issues-list.md +6
@@ -6,3 +6,9 @@ word written beside it in the row meta as `.word-text`, so colour is never the
66 only mark and a phone without hover still reads it. One primary action ("New
77 issue"). The repository's labels fold into a "Labels" disclosure on this list;
88 every one is also a palette entry ("Issues labelled …").
9
10 ## At 390 px (#9344)
11
12 An issue's title is the writer's words, so inside `[data-tells]` (an attribute, not a class) the row's title and meta
13 wrap and break long words anywhere, in place of the one-line ellipsis. No fixed width; the page does not scroll
14 sideways. No new class. The owner's phone look of `/preview-admin/sample/issues` is attached to the pull.
src/spawn/preview-looks.ts +4
@@ -47,6 +47,9 @@ export const PREVIEW_BETS_PAGE = `${PREVIEW_REPO_HOME}/bets`;
4747 /** The waves page, whose long headlines must wrap at a 390 px phone (#9325). */
4848 export const PREVIEW_WAVES_PAGE = `${PREVIEW_REPO_HOME}/waves`;
4949
50 /** The issues list, whose long titles must wrap at a 390 px phone (#9344). */
51 export const PREVIEW_ISSUES_PAGE = `${PREVIEW_REPO_HOME}/issues`;
52
5053 /** The pulls list, whose long titles must wrap at a 390 px phone (#9346). */
5154 export const PREVIEW_PULLS_PAGE = `${PREVIEW_REPO_HOME}/pulls`;
5255
@@ -85,6 +88,7 @@ export const PREVIEW_OWNER_LOOKS: readonly OwnerLook[] = [
8588 PREVIEW_BETS_PAGE,
8689 PREVIEW_WAVES_PAGE,
8790 PREVIEW_PULLS_PAGE,
91 PREVIEW_ISSUES_PAGE,
8892 ].flatMap((page) => (["desktop", "phone"] as const).map((kind) => ({ page, kind })));
8993
9094 /**
src/web/studio/lists.ts +11 −2
@@ -380,6 +380,15 @@ export function tellsListActions(o: {
380380 ];
381381 }
382382
383 /**
384 * An issue's title is the writer's words, so inside `[data-tells]` a row wraps
385 * them (a long word breaks anywhere) in place of the one-line ellipsis, and the
386 * page never scrolls sideways at 390 px. No new class.
387 */
388 export const TELLS_CSS = `[data-tells] { overflow-wrap: anywhere; }
389 [data-tells] .row-title, [data-tells] .row-meta { white-space: normal; overflow: visible; text-overflow: clip; }
390 [data-tells] .row { align-items: flex-start; }`;
391
383392 /**
384393 * GET /:owner/:name/issues: every issue, for every
385394 * repository and every viewer — one row per issue in its studio word, who
@@ -515,7 +524,7 @@ export async function tellsList(ctx: Ctx): Promise<Response> {
515524 : html`${reports ?? null} ${compose} ${outside ?? null} ${signIn}`;
516525
517526 const body = html`${repoHeader(ctx, repo, "issues")}
518 <div class="mt">
527 <div class="mt" data-tells>
519528 ${wordFilterBar(
520529 (word) => facetHref(listBase, f, { word }),
521530 f.word,
@@ -548,7 +557,7 @@ export async function tellsList(ctx: Ctx): Promise<Response> {
548557 }),
549558 ],
550559 body,
551 styleCss: labelCss([...repoLabels, ...[...labels.values()].flat()]),
560 styleCss: `${TELLS_CSS}\n${labelCss([...repoLabels, ...[...labels.values()].flat()])}`,
552561 scriptJs: liveClientJs,
553562 });
554563 notePhase(ctx.request, "render", performance.now() - at);
test/issues-fit.test.ts added +82
@@ -0,0 +1,82 @@
1 /**
2 * The issues list fits a 390 px phone (#9344): seeded long content (an unbroken
3 * 250-character word, the longest a title may be, plus a long title and many rows)
4 * ships no fixed width over 390 px, and the long-text container wraps anywhere.
5 */
6 import { afterAll, beforeAll, describe, expect, test } from "bun:test";
7 import { mkdtemp, rm } from "node:fs/promises";
8 import { tmpdir } from "node:os";
9 import { join } from "node:path";
10 import { commitToBranch, createRepo } from "../src/actions/repos.ts";
11 import { openIssue } from "../src/actions/issues.ts";
12 import { createApp, type App } from "../src/app.ts";
13 import { createSession } from "../src/core/sessions.ts";
14 import { createUser } from "../src/core/users.ts";
15 import { serve, type Servers } from "../src/http/server.ts";
16 import { PREVIEW_OWNER_LOOKS, PREVIEW_ISSUES_PAGE } from "../src/spawn/preview-looks.ts";
17 import { utilities as base } from "../src/web/style/base.ts";
18 import { components } from "../src/web/style/components.ts";
19 import { content } from "../src/web/style/content.ts";
20
21 const WORD = "P".repeat(250);
22 let dir: string;
23 let app: App;
24 let servers: Servers;
25 let page: string;
26
27 const must = <T>(r: { ok: true; value: T } | { ok: false; error: unknown }): T => {
28 if (!r.ok) throw new Error(JSON.stringify(r.error));
29 return r.value;
30 };
31
32 beforeAll(async () => {
33 dir = await mkdtemp(join(tmpdir(), "forge-issues-fit-"));
34 app = createApp({ dataDir: dir, port: 0 });
35 servers = await serve(app);
36 const u = must(await createUser(app.db, { origin: "seed", trusted: true, username: "alice", email: "[email protected]", password: "a-good-passphrase", adminIfFirst: true }));
37 const repo = must(await createRepo(app, u, { name: "fit", visibility: "public" }));
38 must(await commitToBranch(app, u, repo, { message: "init", files: [{ path: "README.md", content: "x" }] }));
39 for (let i = 0; i < 12; i++) {
40 const title = i === 0 ? WORD : i === 1 ? "A very long title ".repeat(12).trim() : `Issue number ${i}`;
41 must(openIssue(app, u, repo, { title }));
42 }
43 const cookie = `forge_session=${createSession(app.db, u.id).token}; forge_mode=dev`;
44 page = await (await fetch(`${servers.url}/alice/fit/issues`, { headers: { cookie } })).text();
45 }, 60_000);
46 afterAll(async () => {
47 servers.stop();
48 app.close();
49 await rm(dir, { recursive: true, force: true });
50 });
51
52 describe("the issues list at 390 px", () => {
53 test("the long content is on the page, in many rows", () => {
54 expect(page).toContain(WORD);
55 expect(page).toContain("A very long title");
56 expect(page.match(/class="row[ "]/g)?.length ?? 0).toBeGreaterThanOrEqual(12);
57 });
58
59 test("no inline width and no shipped rule fixes a width over 390 px", () => {
60 expect(page).not.toMatch(/style="[^"]*(?:^|[;\s])(?:min-|max-)?width\s*:/i);
61 for (const m of page.matchAll(/\swidth=["']?(\d+)/gi)) expect(Number(m[1])).toBeLessThanOrEqual(390);
62 const over: string[] = [];
63 for (const css of [base, components, content, ...(page.match(/<style[^>]*>[\s\S]*?<\/style>/g) ?? [])]) {
64 for (const m of css.matchAll(/(?<![-\w(])(?:min-)?width\s*:\s*(-?[\d.]+)(px|rem|em|ch)\b/g)) {
65 if (Number(m[1]) * (m[2] === "px" ? 1 : m[2] === "ch" ? 8 : 16) > 390) over.push(m[0]);
66 }
67 }
68 expect(over).toEqual([]);
69 });
70
71 test("the list's container wraps anywhere, and its rows may wrap", () => {
72 expect(page).toContain("data-tells");
73 const css = (page.match(/<style[^>]*>[\s\S]*?<\/style>/g) ?? []).join("\n");
74 expect(css).toMatch(/\[data-tells\]\s*\{[^}]*overflow-wrap:\s*(anywhere|break-word)/);
75 expect(css).toMatch(/\[data-tells\] \.row-title[^{]*\{[^}]*white-space:\s*normal/);
76 });
77 });
78
79 test("the owner's phone look takes the issues list", () => {
80 expect(PREVIEW_ISSUES_PAGE).toBe("/preview-admin/sample/issues");
81 expect(PREVIEW_OWNER_LOOKS).toContainEqual({ page: PREVIEW_ISSUES_PAGE, kind: "phone" });
82 });

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs