Public: anyone can read this; the crew can change it.
A repository's head page wraps long names, descriptions and branch names at 390 px, pinned by a static test #9478
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/9454-a-repository-s-head-page-wraps-long-name → main 1 commit fork
2 files
changed +117
−1
src/web/style/content.ts +11 −1
| @@ -304,7 +304,17 @@ form.inline { display: inline; margin-left: auto; } | ||
| 304 | 304 | than the phone rather than letting its own ellipsis do the work. A zero |
| 305 | 305 | min-width is what makes truncation inside a grid actually truncate. */ |
| 306 | 306 | .split > * { min-width: 0; } |
| 307 | .split { grid-template-columns: minmax(0, 1fr); } | |
| 307 | .split { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; } | |
| 308 | ||
| 309 | /* A repository's head page at 390 px: the head, the About rail and the body | |
| 310 | wrap an unbroken name, description or branch; the branch picker shrinks and | |
| 311 | its label truncates; README code and tables scroll inside their own box. */ | |
| 312 | .repo-head, .split > aside { overflow-wrap: anywhere; } | |
| 313 | .bar > .menu { flex: 0 1 auto; min-width: 0; max-width: 100%; } | |
| 314 | .bar > .menu > summary { max-width: 100%; min-width: 0; } | |
| 315 | .bar > .menu > summary .truncate { min-width: 0; } | |
| 316 | .prose pre, .prose table { max-width: 100%; overflow-x: auto; } | |
| 317 | .prose table { display: block; } | |
| 308 | 318 | |
| 309 | 319 | /* The generic two-column page: content, then a sidebar that sticks. */ |
| 310 | 320 | .split { display: grid; gap: 16px; margin-top: 16px; align-items: start; } |
test/repo-head-fit.test.ts added +106
| @@ -0,0 +1,106 @@ | ||
| 1 | /** | |
| 2 | * A repository's head page fits a 390 px phone (#9454): seeded long content (an | |
| 3 | * unbroken description word, a long branch and file name, many rows, a README with | |
| 4 | * a long word, a long code line and a wide table) ships no fixed width over 390 px, | |
| 5 | * and the head, rail and body wrap while code and tables scroll in their own box. | |
| 6 | */ | |
| 7 | import { afterAll, beforeAll, describe, expect, test } from "bun:test"; | |
| 8 | import { mkdtemp, rm } from "node:fs/promises"; | |
| 9 | import { tmpdir } from "node:os"; | |
| 10 | import { join } from "node:path"; | |
| 11 | import { commitToBranch, createRepo } from "../src/actions/repos.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 { utilities as base } from "../src/web/style/base.ts"; | |
| 17 | import { components } from "../src/web/style/components.ts"; | |
| 18 | import { content } from "../src/web/style/content.ts"; | |
| 19 | ||
| 20 | const WORD = "D".repeat(250); | |
| 21 | const RWORD = "R".repeat(250); | |
| 22 | const BRANCH = "b" + "-long-branch".repeat(16); | |
| 23 | const FILE = "f".repeat(116) + ".txt"; | |
| 24 | const CODE = "const x = " + "y".repeat(290) + ";"; | |
| 25 | let dir: string; | |
| 26 | let app: App; | |
| 27 | let servers: Servers; | |
| 28 | let page: string; | |
| 29 | let emptyPage: string; | |
| 30 | ||
| 31 | const must = <T>(r: { ok: true; value: T } | { ok: false; error: unknown }): T => { | |
| 32 | if (!r.ok) throw new Error(JSON.stringify(r.error)); | |
| 33 | return r.value; | |
| 34 | }; | |
| 35 | const styles = (html: string) => (html.match(/<style[^>]*>[\s\S]*?<\/style>/g) ?? []).join("\n"); | |
| 36 | ||
| 37 | beforeAll(async () => { | |
| 38 | dir = await mkdtemp(join(tmpdir(), "forge-repo-head-fit-")); | |
| 39 | app = createApp({ dataDir: dir, port: 0 }); | |
| 40 | servers = await serve(app); | |
| 41 | const u = must(await createUser(app.db, { origin: "seed", trusted: true, username: "alice", email: "[email protected]", password: "a-good-passphrase", adminIfFirst: true })); | |
| 42 | const repo = must(await createRepo(app, u, { name: "fit", visibility: "public", description: WORD })); | |
| 43 | const readme = [`# Title`, RWORD, "", "```", CODE, "```", "", "| a | b | c | d |", "|---|---|---|---|", `| ${"1".repeat(80)} | ${"2".repeat(80)} | ${"3".repeat(80)} | 4 |`].join("\n"); | |
| 44 | const files = [{ path: "README.md", content: readme }, { path: FILE, content: "x" }]; | |
| 45 | for (let i = 0; i < 40; i++) files.push({ path: `file-${i}.txt`, content: "x" }); | |
| 46 | must(await commitToBranch(app, u, repo, { message: "init", files })); | |
| 47 | must(await commitToBranch(app, u, repo, { message: "branch", branch: BRANCH, files: [{ path: "b.txt", content: "b" }] })); | |
| 48 | must(await createRepo(app, u, { name: "empty", visibility: "public", description: WORD })); | |
| 49 | const cookie = `forge_session=${createSession(app.db, u.id).token}; forge_mode=dev`; | |
| 50 | const get = async (p: string) => (await fetch(`${servers.url}${p}`, { headers: { cookie } })).text(); | |
| 51 | page = await get(`/alice/fit?ref=${encodeURIComponent(BRANCH)}`); | |
| 52 | emptyPage = await get("/alice/empty"); | |
| 53 | }, 60_000); | |
| 54 | afterAll(async () => { | |
| 55 | servers.stop(); | |
| 56 | app.close(); | |
| 57 | await rm(dir, { recursive: true, force: true }); | |
| 58 | }); | |
| 59 | ||
| 60 | describe("a repository's head page at 390 px", () => { | |
| 61 | test("the long content is on the page, in many rows", () => { | |
| 62 | expect(page).toContain(WORD); | |
| 63 | expect(page).toContain(BRANCH); | |
| 64 | expect(page).toContain(FILE); | |
| 65 | expect(page).toContain(RWORD); | |
| 66 | expect(page).toContain("y".repeat(290)); | |
| 67 | expect(page).toContain("<table"); | |
| 68 | expect(page.match(/class="row[ "]/g)?.length ?? 0).toBeGreaterThanOrEqual(40); | |
| 69 | expect(emptyPage).toContain(WORD); | |
| 70 | }); | |
| 71 | ||
| 72 | test("no inline width and no shipped rule fixes a width over 390 px", () => { | |
| 73 | for (const html of [page, emptyPage]) { | |
| 74 | expect(html).not.toMatch(/style="[^"]*(?:^|[;\s])(?:min-|max-)?width\s*:/i); | |
| 75 | for (const m of html.matchAll(/\swidth=["']?(\d+)/gi)) expect(Number(m[1])).toBeLessThanOrEqual(390); | |
| 76 | const over: string[] = []; | |
| 77 | for (const css of [base, components, content, styles(html)]) { | |
| 78 | for (const m of css.matchAll(/(?<![-\w(])(?:min-)?width\s*:\s*(-?[\d.]+)(px|rem|em|ch)\b/g)) { | |
| 79 | if (Number(m[1]) * (m[2] === "px" ? 1 : m[2] === "ch" ? 8 : 16) > 390) over.push(m[0]); | |
| 80 | } | |
| 81 | } | |
| 82 | expect(over).toEqual([]); | |
| 83 | } | |
| 84 | }); | |
| 85 | ||
| 86 | test("the head, the rail and the body wrap anywhere", () => { | |
| 87 | expect(page).toContain('class="repo-head'); | |
| 88 | expect(page).toContain('<aside aria-label="About"'); | |
| 89 | expect(page).toMatch(/class="split"/); | |
| 90 | expect(content).toMatch(/\.repo-head, \.split > aside\s*\{[^}]*overflow-wrap:\s*anywhere/); | |
| 91 | expect(content).toMatch(/\.split\s*\{[^}]*overflow-wrap:\s*anywhere/); | |
| 92 | expect(emptyPage).toContain('class="repo-head'); | |
| 93 | }); | |
| 94 | ||
| 95 | test("the branch picker shrinks and its label truncates", () => { | |
| 96 | expect(page).toMatch(/<span class="truncate">b-long-branch/); | |
| 97 | expect(content).toMatch(/\.bar > \.menu\s*\{[^}]*min-width:\s*0/); | |
| 98 | expect(content).toMatch(/\.bar > \.menu\s*\{[^}]*flex:\s*0 1 auto/); | |
| 99 | expect(content).toMatch(/\.bar > \.menu > summary \.truncate\s*\{[^}]*min-width:\s*0/); | |
| 100 | }); | |
| 101 | ||
| 102 | test("README code and tables scroll inside their own box", () => { | |
| 103 | expect(page).toContain('class="prose"'); | |
| 104 | expect(content).toMatch(/\.prose pre, \.prose table\s*\{[^}]*overflow-x:\s*auto/); | |
| 105 | }); | |
| 106 | }); |