mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(ui): unify Memory and Evidence reading typography

Browse Source
This commit is contained in:
Codex
2026-09-13 17:07:37 +02:00
parent 3535fda958
commit 26c5605ff7
7 changed files with 188 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/e2e/ui-visual-review.spec.ts
+40 -2
View File
@@ -109,7 +109,7 @@ for (const width of [390, 1280, 2400]) {
const writes = await fixtures(page);
const sample = memoryFormattingExamples[0];
const longEvidence = { ...evidence, applies_to: { concepts: ["Esempio simulato"], tables: ["demo_visuale.identificatore_lungo_per_la_verifica_della_formattazione"], columns: [] },
payload: { rule: sample.detail }, provenance: { source_file: "source/demo.md", supporting_excerpts: ["**Esempio simulato** con `codice_inline` e un collegamento alla regola.\n\nSecondo paragrafo di provenienza."] } };
payload: { rule: sample.detail + "\n\n" + [1, 2, 3, 4, 5, 6].map(level => "#".repeat(level) + " Sottotitolo " + level + "\n\nTesto della sottosezione.").join("\n\n") + "\n\n```sql\nSELECT 1;\n```" }, provenance: { source_file: "source/demo.md", supporting_excerpts: ["**Esempio simulato** con `codice_inline` e un collegamento alla regola.\n\nSecondo paragrafo di provenienza."] } };
await page.route(`**/api/workspaces/${workspace}/evidence/*`, route => route.fulfill({ json: { ...evidencePage, item: longEvidence } }));
await page.goto("/");
await admin(page, "Evidence");
@@ -120,6 +120,26 @@ for (const width of [390, 1280, 2400]) {
const rule = article.locator(".thot-knowledge-prose").first();
await expect(rule.locator(":scope > p")).not.toHaveCount(1);
await expect(rule.locator("p").first()).toHaveCSS("max-width", "none");
await expect(article.locator(".thot-knowledge-title")).toHaveCSS("font-size", "24px");
for (const heading of await article.locator(".thot-knowledge-heading").all()) {
await expect(heading).toHaveCSS("font-size", "20px");
await expect(heading).toHaveCSS("font-weight", "600");
await expect(heading).toHaveCSS("margin-bottom", "8px");
}
const bodyFamily = await rule.evaluate(el => getComputedStyle(el).fontFamily);
expect(bodyFamily).toContain("Manrope");
for (const paragraph of await article.locator("section > p:not(.thot-knowledge-meta), .thot-knowledge-prose p").all()) {
await expect(paragraph).toHaveCSS("font-size", "16px");
await expect(paragraph).toHaveCSS("line-height", "26.4px");
await expect(paragraph).toHaveCSS("font-family", bodyFamily);
}
for (const heading of await rule.locator("h1,h2,h3,h4,h5,h6").all()) {
await expect(heading).toHaveCSS("font-size", "16px");
await expect(heading).toHaveCSS("font-weight", "600");
await expect(heading).toHaveCSS("font-family", bodyFamily);
}
await expect(rule.locator("pre code")).toHaveCSS("font-size", "14px");
await expect(rule.locator("p code").first()).toHaveCSS("font-size", "14px");
expect(await article.evaluate(el => {
const parent = el.parentElement!;
const css = getComputedStyle(parent);
@@ -129,7 +149,7 @@ for (const width of [390, 1280, 2400]) {
await expect(copy).toHaveText("");
await expect(copy.locator("svg")).toHaveCount(1);
await expect(article.locator("strong").filter({ hasText: "Esempio simulato" })).toBeVisible();
await article.locator("h2").scrollIntoViewIfNeeded();
await article.locator(".thot-knowledge-title").scrollIntoViewIfNeeded();
await page.screenshot({ path: testInfo.outputPath("evidence-readable.png"), animations: "disabled" });
expect((await inspect(page)).overflow).toBe(0);
@@ -141,6 +161,16 @@ for (const width of [390, 1280, 2400]) {
await expect(content.locator(":scope > p")).not.toHaveCount(1);
await expect(content.locator("p").first()).toHaveCSS("max-width", "none");
await expect(content.locator("p").nth(1)).toHaveCSS("margin-top", "20px");
await expect(memoryDetail.locator(".thot-knowledge-title")).toHaveCSS("font-size", "24px");
for (const heading of await memoryDetail.locator(".thot-knowledge-heading").all()) {
await expect(heading).toHaveCSS("font-size", "20px");
await expect(heading).toHaveCSS("font-weight", "600");
await expect(heading).toHaveCSS("font-family", bodyFamily);
await expect(heading).toHaveCSS("margin-bottom", "8px");
}
await expect(content.locator("p").first()).toHaveCSS("font-size", "16px");
await expect(content.locator("p").first()).toHaveCSS("line-height", "26.4px");
await expect(content.locator("p").first()).toHaveCSS("font-family", bodyFamily);
expect(await content.evaluate(el => Math.abs(el.getBoundingClientRect().width - el.parentElement!.clientWidth))).toBeLessThan(2);
await memoryDetail.getByRole("heading", { name: sample.subject, exact: true }).scrollIntoViewIfNeeded();
await page.screenshot({ path: testInfo.outputPath("memory-readable.png"), animations: "disabled" });
@@ -150,6 +180,14 @@ for (const width of [390, 1280, 2400]) {
await expect(page.locator(".thot-host")).toHaveAttribute("data-theme", "dark");
await memoryDetail.getByRole("heading", { name: sample.subject, exact: true }).scrollIntoViewIfNeeded();
await page.screenshot({ path: testInfo.outputPath("memory-readable-dark.png"), animations: "disabled" });
await expect(content.locator("p").first()).toHaveCSS("line-height", "26.4px");
await page.getByRole("button", { name: memoryFormattingExamples[1].subject, exact: true }).click();
await expect(memoryDetail.getByRole("heading", { name: "Prima del conteggio" })).toHaveCSS("font-size", "16px");
await expect(memoryDetail.getByRole("heading", { name: "Prima del conteggio" })).toHaveCSS("font-family", bodyFamily);
await memoryDetail.locator(".thot-knowledge-title").scrollIntoViewIfNeeded();
await page.screenshot({ path: testInfo.outputPath("memory-headings-dark.png"), animations: "disabled" });
await page.getByRole("button", { name: memoryFormattingExamples[2].subject, exact: true }).click();
await expect(memoryDetail.locator("pre")).toHaveCSS("font-size", "14px");
expect((await inspect(page)).overflow).toBe(0);
expect(writes).toEqual([]);
});