Merge pull request #25 from codex/dashboard-type-balance

fix(dashboard): rebalance type scale

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;
   }
 

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;

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;
   }
 

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;

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;

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;

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,