Public: anyone can read this; the crew can change it.
A repository's files page fits a 390 px phone: long paths and file names wrap, a file's code scrolls inside its box, never the page #9497
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/9376-a-repository-s-files-page-fits-a-390-px → main 2 commits fork
2 files
changed +118
−0
src/web/style/content.ts +4
| @@ -696,7 +696,11 @@ form.inline { display: inline; margin-left: auto; } | ||
| 696 | 696 | tree's width is one custom property, \`--ex-w\`, so the divider's script |
| 697 | 697 | has exactly one thing to set and the stylesheet keeps the fallback. */ |
| 698 | 698 | .code-layout { display: grid; gap: 12px; margin-top: 12px; align-items: start; } |
| 699 | /* The files page (#9376): long names wrap, code scrolls in its own .code box. */ | |
| 700 | .code-layout { overflow-wrap: anywhere; } | |
| 699 | 701 | .code-layout > #code-main { min-width: 0; } |
| 702 | .code-layout #code-main > * { min-width: 0; } | |
| 703 | .code-layout #code-main .bar { flex-wrap: wrap; } | |
| 700 | 704 | .code-layout > #code-main[aria-busy="true"] { opacity: .55; transition: opacity 120ms var(--ease); } |
| 701 | 705 | /* The divider is nothing until a script can drag it, and nothing on one |
| 702 | 706 | column either. */ |
test/tree-fit.test.ts added +114
| @@ -0,0 +1,114 @@ | ||
| 1 | /** | |
| 2 | * A repository's files page fits a 390 px phone (#9376): a directory listing | |
| 3 | * and a file view, seeded with a 250-character unbroken name, a long code line | |
| 4 | * and many rows, fix no width over 390 px; long names wrap and code scrolls in | |
| 5 | * its 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 { findChromium } from "../src/looks/capture.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 | import { chromiumRuns, evaluateLoaded } from "./helpers/chrome.ts"; | |
| 21 | ||
| 22 | const WORD = "N".repeat(250); | |
| 23 | const DIR = "d".repeat(120); | |
| 24 | const FILE = `${WORD}.txt`; | |
| 25 | const CODE = "const x = " + "y".repeat(290) + ";"; | |
| 26 | let dir: string; | |
| 27 | let app: App; | |
| 28 | let servers: Servers; | |
| 29 | let listing: string; | |
| 30 | let file: string; | |
| 31 | let session: { name: string; value: string }; | |
| 32 | const listingPath = "/alice/fit/tree/main"; | |
| 33 | const filePath = "/alice/fit/blob/main/code.ts"; | |
| 34 | ||
| 35 | const must = <T>(r: { ok: true; value: T } | { ok: false; error: unknown }): T => { | |
| 36 | if (!r.ok) throw new Error(JSON.stringify(r.error)); | |
| 37 | return r.value; | |
| 38 | }; | |
| 39 | const styles = (html: string) => (html.match(/<style[^>]*>[\s\S]*?<\/style>/g) ?? []).join("\n"); | |
| 40 | ||
| 41 | beforeAll(async () => { | |
| 42 | dir = await mkdtemp(join(tmpdir(), "forge-tree-fit-")); | |
| 43 | app = createApp({ dataDir: dir, port: 0 }); | |
| 44 | servers = await serve(app); | |
| 45 | const u = must(await createUser(app.db, { origin: "seed", trusted: true, username: "alice", email: "[email protected]", password: "a-good-passphrase", adminIfFirst: true })); | |
| 46 | const repo = must(await createRepo(app, u, { name: "fit", visibility: "public" })); | |
| 47 | const files = [{ path: "code.ts", content: `${CODE}\n` }, { path: FILE, content: "x" }, { path: `${DIR}/${WORD}/inner.txt`, content: "x" }]; | |
| 48 | for (let i = 0; i < 40; i++) files.push({ path: `file-${i}.txt`, content: "x" }); | |
| 49 | must(await commitToBranch(app, u, repo, { message: "init", files })); | |
| 50 | const token = createSession(app.db, u.id).token; | |
| 51 | session = { name: "forge_session", value: token }; | |
| 52 | const cookie = `forge_session=${token}; forge_mode=dev`; | |
| 53 | const get = async (p: string) => (await fetch(`${servers.url}${p}`, { headers: { cookie } })).text(); | |
| 54 | listing = await get(listingPath); | |
| 55 | file = await get(filePath); | |
| 56 | }, 60_000); | |
| 57 | afterAll(async () => { | |
| 58 | servers.stop(); | |
| 59 | app.close(); | |
| 60 | await rm(dir, { recursive: true, force: true }); | |
| 61 | }); | |
| 62 | ||
| 63 | describe("the files page at 390 px", () => { | |
| 64 | test("both views render the seeded long content", () => { | |
| 65 | expect(listing).toContain(WORD); | |
| 66 | expect(listing).toContain(DIR); | |
| 67 | expect(listing.match(/file-\d+\.txt/g)!.length).toBeGreaterThanOrEqual(40); | |
| 68 | expect(file).toContain("y".repeat(290)); | |
| 69 | expect(file).toContain('class="code'); | |
| 70 | expect(file).toContain(WORD); | |
| 71 | }); | |
| 72 | ||
| 73 | test("no inline width, and no rule the page ships fixes a width over 390 px", () => { | |
| 74 | for (const html of [listing, file]) { | |
| 75 | expect(html).not.toMatch(/style="[^"]*(?:^|[;\s"])(?:min-|max-)?width\s*:/i); | |
| 76 | for (const m of html.matchAll(/\swidth=["']?(\d+)/gi)) expect(Number(m[1])).toBeLessThanOrEqual(390); | |
| 77 | const over: string[] = []; | |
| 78 | for (const css of [base, components, content, styles(html)]) { | |
| 79 | for (const m of css.matchAll(/(?<![-\w(])(?:min-)?width\s*:\s*(-?[\d.]+)(px|rem|em|ch)\b/g)) { | |
| 80 | if (Number(m[1]) * (m[2] === "px" ? 1 : m[2] === "ch" ? 8 : 16) > 390) over.push(m[0]); | |
| 81 | } | |
| 82 | } | |
| 83 | expect(over).toEqual([]); | |
| 84 | } | |
| 85 | }); | |
| 86 | ||
| 87 | test("long names wrap anywhere; code scrolls in its own box", () => { | |
| 88 | expect(content).toMatch(/\.code-layout\s*\{[^}]*overflow-wrap:\s*anywhere/); | |
| 89 | expect(content).toMatch(/(?:^|\n)\.code\s*\{[^}]*overflow-x:\s*auto/); | |
| 90 | }); | |
| 91 | }); | |
| 92 | ||
| 93 | const found = findChromium(); | |
| 94 | const chromium = found !== undefined && chromiumRuns(found) ? found : undefined; | |
| 95 | if (chromium === undefined) console.log("SKIPPING: no chromium that starts on this machine, so the files phone look is not measured"); | |
| 96 | ||
| 97 | describe.skipIf(chromium === undefined)("the files page, measured at 390x844", () => { | |
| 98 | const measure = `(() => { | |
| 99 | const vw = document.documentElement.clientWidth; | |
| 100 | const scope = [...document.querySelectorAll(".code-layout, .code-layout *")]; | |
| 101 | const code = document.querySelector(".code"); | |
| 102 | const overflowing = scope.filter((el) => !el.closest(".code") && el.getBoundingClientRect().right > vw + 1).slice(0, 8).map((el) => el.tagName.toLowerCase() + "." + el.className); | |
| 103 | return JSON.stringify({ scrollWidth: document.documentElement.scrollWidth, viewportWidth: vw, overflowing, codeScrolls: code ? code.scrollWidth > code.clientWidth : null }); | |
| 104 | })()`; | |
| 105 | for (const which of ["listing", "file"] as const) { | |
| 106 | test(`${which}: no sideways scroll`, async () => { | |
| 107 | const m = JSON.parse(await evaluateLoaded(chromium!, `${servers.url}${which === "listing" ? listingPath : filePath}`, { width: 390, height: 844 }, [session], measure)) as { scrollWidth: number; viewportWidth: number; overflowing: string[]; codeScrolls: boolean | null }; | |
| 108 | console.log(`files ${which} 390x844: ${JSON.stringify(m)}`); | |
| 109 | expect(m.overflowing).toEqual([]); | |
| 110 | expect(m.scrollWidth).toBeLessThanOrEqual(m.viewportWidth); | |
| 111 | if (which === "file") expect(m.codeScrolls).toBe(true); | |
| 112 | }, 30_000); | |
| 113 | } | |
| 114 | }); |