dfe27d1 · fba79dc · 46453b2 · 2b26b97
@@ -23,3 +23,5 @@
file.
- `.wd` — a changed word inside an added or deleted line, underlined on a stronger tint.
- `.tok-inserted` — an inserted token in highlighted code, in the add colour.
- `.tok-deleted` — a deleted token in highlighted code, in the delete colour.
The commits list and a commit's page (#9348) add no class: inside `[data-commits]` (an attribute, `COMMITS_CSS` in `src/web/pages/commits.ts`) a row's subject and author wrap, a long word breaks anywhere, and the diff scrolls inside its own `.diff-body`.
@@ -53,6 +53,9 @@
export const PREVIEW_ISSUES_PAGE = `${PREVIEW_REPO_HOME}/issues`;
/** The pulls list, whose long titles must wrap at a 390 px phone (#9346). */
export const PREVIEW_PULLS_PAGE = `${PREVIEW_REPO_HOME}/pulls`;
/** The commits list, whose long messages must wrap at a 390 px phone (#9348). */
export const PREVIEW_COMMITS_PAGE = `${PREVIEW_REPO_HOME}/commits`;
/** The Later gate's proposal on the sample (#9212): what the gate holds, grouped by theme. */
export const PREVIEW_HELD_PAGE = `${PREVIEW_REPO_HOME}/held`;
/**
@@ -88,6 +91,7 @@
export const PREVIEW_OWNER_LOOKS: readonly OwnerLook[] = [
  PREVIEW_BETS_PAGE,
  PREVIEW_WAVES_PAGE,
  PREVIEW_PULLS_PAGE,
  PREVIEW_COMMITS_PAGE,
  PREVIEW_ISSUES_PAGE,
].flatMap((page) => (["desktop", "phone"] as const).map((kind) => ({ page, kind })));
@@ -51,6 +51,17 @@
import {
const PER_PAGE = 30;
/**
 * A commit's subject, body and author are the writer's words, so inside
 * `[data-commits]` a row wraps them (a long word breaks anywhere) in place of
 * the list's one-line ellipsis, and the page never scrolls sideways at 390 px.
 * A diff keeps scrolling inside its own `.diff-body`. No new class.
 */
export const COMMITS_CSS = `[data-commits] { overflow-wrap: anywhere; }
[data-commits] .row-title, [data-commits] .row-meta { white-space: normal; overflow: visible; text-overflow: clip; }
[data-commits] .row { align-items: flex-start; }
[data-commits] .card-head h2 { min-width: 0; }`;
/** Infinity, 1e300 and NaN all collapse to page 1 — never a bogus skip. */
function pageNumber(raw: string | null): number {
  const requested = Math.floor(Number(raw));
@@ -87,7 +98,7 @@
export function commitRows(
          () => html` · ${badge("merge", { variant: "secondary" })}`,
        )}</span
      >`;
  return listCard(
  return html`<div data-commits>${listCard(
    commits.map((commit) => {
      const verdict = verdicts.get(commit.oid);
      const step = verdict?.summary.split("\n")[0]?.trim() ?? "";
@@ -122,7 +133,7 @@
export function commitRows(
        </div>
      </li>`;
    }),
  );
  )}</div>`;
}
/** A commit's check in a sentence; on red, the first failing step as the check named it. */
@@ -194,7 +205,7 @@
export function renderCommit(
      </div>`,
    { head: html`<h2>${commit.subject}</h2>`, pad: false },
  );
  return html`<div class="mt">${head}</div>
  return html`<div data-commits><div class="mt">${head}</div></div>
    <div class="mt">
      ${renderDiff(diff, {
        syntax,
@@ -281,6 +292,7 @@
export async function commitsPage(ctx: Ctx): Promise<Response> {
      body: html`${scopeHeader(ctx, scope, "commits")}${switcher}
      ${noCommits(num > 1)} ${liveMount({ repo: base })}`,
      scriptJs: liveClientJs,
      styleCss: COMMITS_CSS,
    });
    notePhase(ctx.request, "render", performance.now() - rendering);
    return response;
@@ -308,6 +320,7 @@
export async function commitsPage(ctx: Ctx): Promise<Response> {
    palette: scope.palette,
    body,
    scriptJs: liveClientJs,
    styleCss: COMMITS_CSS,
  });
  notePhase(ctx.request, "render", performance.now() - rendering);
  return response;
@@ -349,6 +362,7 @@
export async function commitPage(ctx: Ctx): Promise<Response> {
    crumbs: scope.crumbs,
    palette: scope.palette,
    body,
    styleCss: COMMITS_CSS,
  });
  notePhase(ctx.request, "render", performance.now() - rendering);
  return immutableWhenAddressed(ctx.auth.user === undefined, repo, rev, response);
@@ -404,6 +418,7 @@
export async function browseCommits(
    crumbs: scope.crumbs,
    palette: scope.palette,
    body,
    styleCss: COMMITS_CSS,
  });
}
@@ -428,5 +443,6 @@
export async function browseCommit(
    crumbs: scope.crumbs,
    palette: scope.palette,
    body,
    styleCss: COMMITS_CSS,
  });
}
@@ -0,0 +1,111 @@
/**
 * The commits list and a commit's page fit a 390 px phone (#9348): seeded long
 * content (a 300-character unbroken word, a long title, many rows) ships no
 * fixed width over 390 px, long text wraps anywhere, and a diff scrolls in its box.
 */
import { afterAll, beforeAll, describe, expect, test } from "bun:test";
import { mkdtemp, rm } from "node:fs/promises";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { commitToBranch, createRepo } from "../src/actions/repos.ts";
import { createApp, type App } from "../src/app.ts";
import { createSession } from "../src/core/sessions.ts";
import { createUser } from "../src/core/users.ts";
import { serve, type Servers } from "../src/http/server.ts";
import { PREVIEW_COMMITS_PAGE, PREVIEW_OWNER_LOOKS } from "../src/spawn/preview-looks.ts";
import { utilities as base } from "../src/web/style/base.ts";
import { components } from "../src/web/style/components.ts";
import { content } from "../src/web/style/content.ts";
const WORD = "W".repeat(300);
let dir: string;
let app: App;
let servers: Servers;
let list: string;
let one: string;
const must = <T>(r: { ok: true; value: T } | { ok: false; error: unknown }): T => {
  if (!r.ok) throw new Error(JSON.stringify(r.error));
  return r.value;
};
beforeAll(async () => {
  dir = await mkdtemp(join(tmpdir(), "forge-commits-fit-"));
  app = createApp({ dataDir: dir, port: 0 });
  servers = await serve(app);
  const u = must(await createUser(app.db, { origin: "seed", trusted: true, username: "alice", email: "[email protected]", password: "a-good-passphrase", adminIfFirst: true }));
  const repo = must(await createRepo(app, u, { name: "fit", visibility: "public" }));
  for (let i = 0; i < 12; i++) {
    const message = i === 0 ? `${WORD}\n\n${WORD}` : i === 1 ? "A very long subject ".repeat(10).trim() : `Commit ${i}`;
    must(await commitToBranch(app, u, repo, { message, files: [{ path: `f${i}.txt`, content: `${"x".repeat(400)}\n` }] }));
  }
  const cookie = `forge_session=${createSession(app.db, u.id).token}; forge_mode=dev`;
  list = await (await fetch(`${servers.url}/alice/fit/commits`, { headers: { cookie } })).text();
  const newest = list.match(/\/alice\/fit\/commit\/([0-9a-f]{40})/)![1]!;
  // The oldest-but-one commit carries the unbroken word; find it by its page.
  for (const m of list.matchAll(/\/alice\/fit\/commit\/([0-9a-f]{40})/g)) {
    const text = await (await fetch(`${servers.url}${m[0]}`, { headers: { cookie } })).text();
    if (text.includes(WORD)) { one = text; break; }
  }
  one ??= await (await fetch(`${servers.url}/alice/fit/commit/${newest}`, { headers: { cookie } })).text();
}, 60_000);
afterAll(async () => {
  servers.stop();
  app.close();
  await rm(dir, { recursive: true, force: true });
});
const styles = (html: string) => (html.match(/<style[^>]*>[\s\S]*?<\/style>/g) ?? []).join("\n");
describe("the commits list and a commit's page at 390 px", () => {
  test("the long content is on both pages", () => {
    expect(list).toContain(WORD);
    expect(list).toContain("A very long subject");
    expect(list.match(/class="row[ "]/g)?.length ?? 0).toBeGreaterThanOrEqual(12);
    expect(one).toContain(WORD);
    expect(one).toContain("diff-body");
  });
  for (const [name, get] of [["list", () => list], ["commit", () => one]] as const) {
    test(`the ${name} ships no width over 390 px`, () => {
      const page = get();
      expect(page).not.toMatch(/style="[^"]*(?:^|[;\s])(?:min-|max-)?width\s*:/i);
      for (const m of page.matchAll(/\swidth=["']?(\d+)/gi)) expect(Number(m[1])).toBeLessThanOrEqual(390);
      const over: string[] = [];
      for (const css of [base, components, content, ...(page.match(/<style[^>]*>[\s\S]*?<\/style>/g) ?? [])]) {
        for (const m of css.matchAll(/(?<![-\w(])(?:min-)?width\s*:\s*(-?[\d.]+)(px|rem|em|ch)\b/g)) {
          if (Number(m[1]) * (m[2] === "px" ? 1 : m[2] === "ch" ? 8 : 16) > 390) over.push(m[0]);
        }
      }
      expect(over).toEqual([]);
    });
    test(`the ${name}'s long-text container wraps anywhere, rows may wrap`, () => {
      const page = get();
      expect(page).toContain("data-commits");
      expect(styles(page)).toMatch(/\[data-commits\]\s*\{[^}]*overflow-wrap:\s*(anywhere|break-word)/);
      expect(styles(page)).toMatch(/\[data-commits\] \.row-title[^{]*\{[^}]*white-space:\s*normal/);
    });
  }
  test("the commit body (the 300-character word) sits inside [data-commits] and wraps", () => {
    const start = one.indexOf("<div data-commits>");
    const body = one.indexOf('data-text="message"');
    const diff = one.indexOf("diff-body");
    expect(start).toBeGreaterThanOrEqual(0);
    expect(body).toBeGreaterThan(start);
    expect(one.indexOf(WORD, body)).toBeGreaterThan(body);
    // The container closes before the diff, which has its own scrolling box.
    expect(one.indexOf(WORD, body)).toBeLessThan(diff);
    expect(content).toMatch(/\.prose\[data-text="message"\] pre \{[^}]*white-space:\s*pre-wrap[^}]*overflow-wrap:\s*anywhere/);
  });
  test("a diff scrolls inside its own box", () => {
    expect(content).toMatch(/\.diff-body \{[^}]*overflow-x:\s*auto/);
  });
});
test("the owner's phone look takes the commits list", () => {
  expect(PREVIEW_COMMITS_PAGE).toBe("/preview-admin/sample/commits");
  expect(PREVIEW_OWNER_LOOKS).toContainEqual({ page: PREVIEW_COMMITS_PAGE, kind: "phone" });
});
		@@ -23,3 +23,5 @@ file.
23	23	- `.wd` — a changed word inside an added or deleted line, underlined on a stronger tint.
24	24	- `.tok-inserted` — an inserted token in highlighted code, in the add colour.
25	25	- `.tok-deleted` — a deleted token in highlighted code, in the delete colour.
	26
	27	The commits list and a commit's page (#9348) add no class: inside `[data-commits]` (an attribute, `COMMITS_CSS` in `src/web/pages/commits.ts`) a row's subject and author wrap, a long word breaks anywhere, and the diff scrolls inside its own `.diff-body`.
		@@ -53,6 +53,9 @@ export const PREVIEW_ISSUES_PAGE = `${PREVIEW_REPO_HOME}/issues`;
53	53	/** The pulls list, whose long titles must wrap at a 390 px phone (#9346). */
54	54	export const PREVIEW_PULLS_PAGE = `${PREVIEW_REPO_HOME}/pulls`;
55	55
	56	/** The commits list, whose long messages must wrap at a 390 px phone (#9348). */
	57	export const PREVIEW_COMMITS_PAGE = `${PREVIEW_REPO_HOME}/commits`;
	58
56	59	/** The Later gate's proposal on the sample (#9212): what the gate holds, grouped by theme. */
57	60	export const PREVIEW_HELD_PAGE = `${PREVIEW_REPO_HOME}/held`;
58	61	/**
		@@ -88,6 +91,7 @@ export const PREVIEW_OWNER_LOOKS: readonly OwnerLook[] = [
88	91	PREVIEW_BETS_PAGE,
89	92	PREVIEW_WAVES_PAGE,
90	93	PREVIEW_PULLS_PAGE,
	94	PREVIEW_COMMITS_PAGE,
91	95	PREVIEW_ISSUES_PAGE,
92	96	].flatMap((page) => (["desktop", "phone"] as const).map((kind) => ({ page, kind })));
93	97
		@@ -51,6 +51,17 @@ import {
51	51
52	52	const PER_PAGE = 30;
53	53
	54	/**
	55	* A commit's subject, body and author are the writer's words, so inside
	56	* `[data-commits]` a row wraps them (a long word breaks anywhere) in place of
	57	* the list's one-line ellipsis, and the page never scrolls sideways at 390 px.
	58	* A diff keeps scrolling inside its own `.diff-body`. No new class.
	59	*/
	60	export const COMMITS_CSS = `[data-commits] { overflow-wrap: anywhere; }
	61	[data-commits] .row-title, [data-commits] .row-meta { white-space: normal; overflow: visible; text-overflow: clip; }
	62	[data-commits] .row { align-items: flex-start; }
	63	[data-commits] .card-head h2 { min-width: 0; }`;
	64
54	65	/** Infinity, 1e300 and NaN all collapse to page 1 — never a bogus skip. */
55	66	function pageNumber(raw: string \| null): number {
56	67	const requested = Math.floor(Number(raw));
		@@ -87,7 +98,7 @@ export function commitRows(
87	98	() => html` · ${badge("merge", { variant: "secondary" })}`,
88	99	)}</span
89	100	>`;
90		return listCard(
	101	return html`<div data-commits>${listCard(
91	102	commits.map((commit) => {
92	103	const verdict = verdicts.get(commit.oid);
93	104	const step = verdict?.summary.split("\n")[0]?.trim() ?? "";
		@@ -122,7 +133,7 @@ export function commitRows(
122	133	</div>
123	134	</li>`;
124	135	}),
125		);
	136	)}</div>`;
126	137	}
127	138
128	139	/** A commit's check in a sentence; on red, the first failing step as the check named it. */
		@@ -194,7 +205,7 @@ export function renderCommit(
194	205	</div>`,
195	206	{ head: html`<h2>${commit.subject}</h2>`, pad: false },
196	207	);
197		return html`<div class="mt">${head}</div>
	208	return html`<div data-commits><div class="mt">${head}</div></div>
198	209	<div class="mt">
199	210	${renderDiff(diff, {
200	211	syntax,
		@@ -281,6 +292,7 @@ export async function commitsPage(ctx: Ctx): Promise<Response> {
281	292	body: html`${scopeHeader(ctx, scope, "commits")}${switcher}
282	293	${noCommits(num > 1)} ${liveMount({ repo: base })}`,
283	294	scriptJs: liveClientJs,
	295	styleCss: COMMITS_CSS,
284	296	});
285	297	notePhase(ctx.request, "render", performance.now() - rendering);
286	298	return response;
		@@ -308,6 +320,7 @@ export async function commitsPage(ctx: Ctx): Promise<Response> {
308	320	palette: scope.palette,
309	321	body,
310	322	scriptJs: liveClientJs,
	323	styleCss: COMMITS_CSS,
311	324	});
312	325	notePhase(ctx.request, "render", performance.now() - rendering);
313	326	return response;
		@@ -349,6 +362,7 @@ export async function commitPage(ctx: Ctx): Promise<Response> {
349	362	crumbs: scope.crumbs,
350	363	palette: scope.palette,
351	364	body,
	365	styleCss: COMMITS_CSS,
352	366	});
353	367	notePhase(ctx.request, "render", performance.now() - rendering);
354	368	return immutableWhenAddressed(ctx.auth.user === undefined, repo, rev, response);
		@@ -404,6 +418,7 @@ export async function browseCommits(
404	418	crumbs: scope.crumbs,
405	419	palette: scope.palette,
406	420	body,
	421	styleCss: COMMITS_CSS,
407	422	});
408	423	}
409	424
		@@ -428,5 +443,6 @@ export async function browseCommit(
428	443	crumbs: scope.crumbs,
429	444	palette: scope.palette,
430	445	body,
	446	styleCss: COMMITS_CSS,
431	447	});
432	448	}
		@@ -0,0 +1,111 @@
	1	/**
	2	* The commits list and a commit's page fit a 390 px phone (#9348): seeded long
	3	* content (a 300-character unbroken word, a long title, many rows) ships no
	4	* fixed width over 390 px, long text wraps anywhere, and a diff scrolls in its box.
	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 { createApp, type App } from "../src/app.ts";
	12	import { createSession } from "../src/core/sessions.ts";
	13	import { createUser } from "../src/core/users.ts";
	14	import { serve, type Servers } from "../src/http/server.ts";
	15	import { PREVIEW_COMMITS_PAGE, PREVIEW_OWNER_LOOKS } from "../src/spawn/preview-looks.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 = "W".repeat(300);
	21	let dir: string;
	22	let app: App;
	23	let servers: Servers;
	24	let list: string;
	25	let one: 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-commits-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	for (let i = 0; i < 12; i++) {
	39	const message = i === 0 ? `${WORD}\n\n${WORD}` : i === 1 ? "A very long subject ".repeat(10).trim() : `Commit ${i}`;
	40	must(await commitToBranch(app, u, repo, { message, files: [{ path: `f${i}.txt`, content: `${"x".repeat(400)}\n` }] }));
	41	}
	42	const cookie = `forge_session=${createSession(app.db, u.id).token}; forge_mode=dev`;
	43	list = await (await fetch(`${servers.url}/alice/fit/commits`, { headers: { cookie } })).text();
	44	const newest = list.match(/\/alice\/fit\/commit\/([0-9a-f]{40})/)![1]!;
	45	// The oldest-but-one commit carries the unbroken word; find it by its page.
	46	for (const m of list.matchAll(/\/alice\/fit\/commit\/([0-9a-f]{40})/g)) {
	47	const text = await (await fetch(`${servers.url}${m[0]}`, { headers: { cookie } })).text();
	48	if (text.includes(WORD)) { one = text; break; }
	49	}
	50	one ??= await (await fetch(`${servers.url}/alice/fit/commit/${newest}`, { headers: { cookie } })).text();
	51	}, 60_000);
	52	afterAll(async () => {
	53	servers.stop();
	54	app.close();
	55	await rm(dir, { recursive: true, force: true });
	56	});
	57
	58	const styles = (html: string) => (html.match(/<style[^>]>[\s\S]?<\/style>/g) ?? []).join("\n");
	59
	60	describe("the commits list and a commit's page at 390 px", () => {
	61	test("the long content is on both pages", () => {
	62	expect(list).toContain(WORD);
	63	expect(list).toContain("A very long subject");
	64	expect(list.match(/class="row[ "]/g)?.length ?? 0).toBeGreaterThanOrEqual(12);
	65	expect(one).toContain(WORD);
	66	expect(one).toContain("diff-body");
	67	});
	68
	69	for (const [name, get] of [["list", () => list], ["commit", () => one]] as const) {
	70	test(`the ${name} ships no width over 390 px`, () => {
	71	const page = get();
	72	expect(page).not.toMatch(/style="[^"](?:^\|[;\s])(?:min-\|max-)?width\s:/i);
	73	for (const m of page.matchAll(/\swidth=["']?(\d+)/gi)) expect(Number(m[1])).toBeLessThanOrEqual(390);
	74	const over: string[] = [];
	75	for (const css of [base, components, content, ...(page.match(/<style[^>]>[\s\S]?<\/style>/g) ?? [])]) {
	76	for (const m of css.matchAll(/(?<![-\w(])(?:min-)?width\s:\s(-?[\d.]+)(px\|rem\|em\|ch)\b/g)) {
	77	if (Number(m[1]) * (m[2] === "px" ? 1 : m[2] === "ch" ? 8 : 16) > 390) over.push(m[0]);
	78	}
	79	}
	80	expect(over).toEqual([]);
	81	});
	82
	83	test(`the ${name}'s long-text container wraps anywhere, rows may wrap`, () => {
	84	const page = get();
	85	expect(page).toContain("data-commits");
	86	expect(styles(page)).toMatch(/\[data-commits\]\s\{[^}]overflow-wrap:\s*(anywhere\|break-word)/);
	87	expect(styles(page)).toMatch(/\[data-commits\] \.row-title[^{]\{[^}]white-space:\s*normal/);
	88	});
	89	}
	90
	91	test("the commit body (the 300-character word) sits inside [data-commits] and wraps", () => {
	92	const start = one.indexOf("<div data-commits>");
	93	const body = one.indexOf('data-text="message"');
	94	const diff = one.indexOf("diff-body");
	95	expect(start).toBeGreaterThanOrEqual(0);
	96	expect(body).toBeGreaterThan(start);
	97	expect(one.indexOf(WORD, body)).toBeGreaterThan(body);
	98	// The container closes before the diff, which has its own scrolling box.
	99	expect(one.indexOf(WORD, body)).toBeLessThan(diff);
	100	expect(content).toMatch(/\.prose\[data-text="message"\] pre \{[^}]white-space:\spre-wrap[^}]overflow-wrap:\sanywhere/);
	101	});
	102
	103	test("a diff scrolls inside its own box", () => {
	104	expect(content).toMatch(/\.diff-body \{[^}]overflow-x:\sauto/);
	105	});
	106	});
	107
	108	test("the owner's phone look takes the commits list", () => {
	109	expect(PREVIEW_COMMITS_PAGE).toBe("/preview-admin/sample/commits");
	110	expect(PREVIEW_OWNER_LOOKS).toContainEqual({ page: PREVIEW_COMMITS_PAGE, kind: "phone" });
	111	});