diff --git a/src/lib/ui/components/DashboardFrame.svelte b/src/lib/ui/components/DashboardFrame.svelte index 5f1f0e4..bd1b93d 100644 --- a/src/lib/ui/components/DashboardFrame.svelte +++ b/src/lib/ui/components/DashboardFrame.svelte @@ -90,10 +90,10 @@ max-width: 100%; overflow-wrap: anywhere; font-family: var(--ui-font-display); - font-size: clamp(2.35rem, 3.65vw, 3.25rem); + font-size: clamp(2.2rem, 3.3vw, 2.95rem); font-weight: 850; letter-spacing: 0; - line-height: 0.78; + line-height: 0.8; white-space: nowrap; } diff --git a/src/lib/ui/components/ModuleCard.svelte b/src/lib/ui/components/ModuleCard.svelte index 852af2d..3d4a725 100644 --- a/src/lib/ui/components/ModuleCard.svelte +++ b/src/lib/ui/components/ModuleCard.svelte @@ -53,7 +53,7 @@ h2 { color: var(--ui-color-muted); - font-size: 0.6rem; + font-size: 0.56rem; line-height: 1; text-transform: uppercase; } @@ -62,7 +62,7 @@ display: block; margin-top: 0.15rem; font-family: var(--ui-font-display); - font-size: clamp(1.45rem, 2vw, 2rem); + font-size: clamp(1.25rem, 1.75vw, 1.72rem); line-height: 0.82; overflow-wrap: anywhere; } @@ -70,7 +70,7 @@ p { margin-top: 0.2rem; color: var(--ui-color-muted); - font-size: 0.52rem; + font-size: 0.49rem; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; diff --git a/src/lib/ui/components/Panel.svelte b/src/lib/ui/components/Panel.svelte index 776e59d..e146f63 100644 --- a/src/lib/ui/components/Panel.svelte +++ b/src/lib/ui/components/Panel.svelte @@ -62,10 +62,10 @@ h2 { margin: 0; font-family: var(--ui-font-display); - font-size: clamp(1.45rem, 2.05vw, 1.95rem); + font-size: clamp(1.25rem, 1.8vw, 1.75rem); font-weight: 800; letter-spacing: 0; - line-height: 0.9; + line-height: 0.92; text-transform: uppercase; } diff --git a/src/lib/ui/components/ServiceRow.svelte b/src/lib/ui/components/ServiceRow.svelte index 9d69dac..d0b10af 100644 --- a/src/lib/ui/components/ServiceRow.svelte +++ b/src/lib/ui/components/ServiceRow.svelte @@ -82,7 +82,7 @@ h3 { overflow: hidden; - font-size: 0.66rem; + font-size: 0.72rem; font-weight: 850; letter-spacing: 0; line-height: 1.05; @@ -92,10 +92,10 @@ } p { - margin-top: 0.16rem; + margin-top: 0.12rem; overflow: hidden; color: var(--ui-color-muted); - font-size: 0.5rem; + font-size: 0.56rem; line-height: 1.08; text-overflow: ellipsis; text-transform: uppercase; diff --git a/src/lib/ui/components/StatusBadge.svelte b/src/lib/ui/components/StatusBadge.svelte index ba37351..c01dab8 100644 --- a/src/lib/ui/components/StatusBadge.svelte +++ b/src/lib/ui/components/StatusBadge.svelte @@ -18,9 +18,9 @@ min-height: 1.12rem; align-items: center; border: var(--ui-border); - padding: 0 0.34rem; + padding: 0 0.3rem; color: var(--ui-color-muted); - font-size: 0.52rem; + font-size: 0.55rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; diff --git a/src/lib/ui/components/TelemetryCard.svelte b/src/lib/ui/components/TelemetryCard.svelte index eb16e7e..ffee09b 100644 --- a/src/lib/ui/components/TelemetryCard.svelte +++ b/src/lib/ui/components/TelemetryCard.svelte @@ -83,7 +83,7 @@ h3 { overflow-wrap: anywhere; color: inherit; - font-size: 0.62rem; + font-size: 0.58rem; font-weight: 800; letter-spacing: 0; line-height: 1.02; @@ -92,7 +92,7 @@ strong { font-family: var(--ui-font-display); - font-size: clamp(1.75rem, 2.75vw, 2.4rem); + font-size: clamp(1.55rem, 2.45vw, 2.22rem); font-weight: 800; letter-spacing: 0; line-height: 0.76; @@ -102,7 +102,7 @@ p { overflow: hidden; color: var(--ui-color-muted); - font-size: 0.53rem; + font-size: 0.49rem; line-height: 1.05; text-overflow: ellipsis; text-transform: uppercase; diff --git a/tests/e2e/dashboard.spec.ts b/tests/e2e/dashboard.spec.ts index 49b41d8..af12705 100644 --- a/tests/e2e/dashboard.spec.ts +++ b/tests/e2e/dashboard.spec.ts @@ -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, diff --git a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png index 6ab2c78..4f29c6c 100644 Binary files a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png and b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png differ diff --git a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png index f49ae52..e12e49f 100644 Binary files a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png and b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png differ