vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

fix(dashboard): rebalance type scale

Browse source
This commit is contained in:
vince 2026-06-19 04:21:57 +02:00
parent bf6e7c0cc9
commit ff4e6c6d36
9 changed files with 48 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

33
tests/e2e/dashboard.spec.ts
View file

@ -44,6 +44,7 @@ test.describe("dashboard page QA gate", () => {
await expect(page.getByText("Infra RAM")).toBeVisible();
await expect(page.getByRole("link", { name: /Vaultwarden/i })).toBeVisible();
await expect(page.locator("[data-model-id='vaultwarden']")).toBeVisible();
await expect(page.locator(".service-row .icon-glyph svg").first()).toBeVisible();
const bodyBox = await page.locator("body").boundingBox();
expect(bodyBox?.width).toBeGreaterThan(1000);
@ -149,6 +150,37 @@ test.describe("dashboard page QA gate", () => {
expect(bookmarkDensity.backgroundColor).toBe("rgba(0, 0, 0, 0)");
});
test("balances dashboard typography at the target viewport", async ({ page }, testInfo) => {
test.skip(testInfo.project.name !== "chromium-desktop");
await page.setViewportSize({ width: 1470, height: 956 });
await page.goto("/");
const typeScale = await page.evaluate(() => {
const fontSize = (selector: string) => {
const element = document.querySelector(selector);
if (!element) throw new Error(`missing ${selector}`);
return Number.parseFloat(window.getComputedStyle(element).fontSize);
};
return {
h1: fontSize("h1"),
panelTitle: fontSize(".service-panel h2"),
serviceDescription: fontSize(".service-row p"),
serviceLabel: fontSize(".service-row h3"),
telemetryLabel: fontSize(".telemetry-card h3"),
telemetryValue: fontSize(".telemetry-card strong"),
};
});
expect(typeScale.serviceLabel).toBeGreaterThanOrEqual(11.4);
expect(typeScale.serviceDescription).toBeGreaterThanOrEqual(8.8);
expect(typeScale.h1).toBeLessThanOrEqual(49);
expect(typeScale.panelTitle).toBeLessThanOrEqual(28);
expect(typeScale.telemetryLabel).toBeLessThanOrEqual(9.5);
expect(typeScale.telemetryValue).toBeLessThanOrEqual(36);
});
test("keeps the first screen usable on mobile", async ({ page }, testInfo) => {
test.skip(testInfo.project.name !== "chromium-mobile");
@ -158,6 +190,7 @@ test.describe("dashboard page QA gate", () => {
page.getByRole("heading", { level: 1, name: "System Overview" }),
).toBeVisible();
await expect(page.getByLabel("Service groups")).toBeVisible();
await expect(page.locator(".service-row .icon-glyph svg").first()).toBeVisible();
await expect(page).toHaveScreenshot("dashboard-mobile.png", {
fullPage: true,