From 8e0b7341a93df75626efd50cccc1e7d6045aafae Mon Sep 17 00:00:00 2001 From: Ali Al Dallal Date: Tue, 18 Aug 2026 09:33:49 -0400 Subject: [PATCH] fix: Compact density is visible -- 2px row padding, perceptibility pinned The mechanism worked (root attribute -> CSS var -> Primer's own row-padding token) but the lever was homeopathic: 6px->4px per row is under the eye's threshold, which read as the setting doing nothing. Compact now cuts to 2px (8px of height back per row -- clearly legible across any list; the 44px companion-breakpoint floor still wins). The e2e previously asserted only 'smaller than comfortable', green at any imperceptible delta -- it now pins a >=6px per-row reclaim so an invisible density mode can never ship green again. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01FW5GkkAG8du7tNdYLk2zSd --- frontend/e2e/display-density.spec.ts | 5 ++++- frontend/src/app/index.css | 7 +++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/e2e/display-density.spec.ts b/frontend/e2e/display-density.spec.ts index 02efdf3c..6ecb0573 100644 --- a/frontend/e2e/display-density.spec.ts +++ b/frontend/e2e/display-density.spec.ts @@ -32,7 +32,10 @@ test('Compact visibly tightens a workflow row, persists across reload, and Comfo await setDensity(page, 'Compact') const compactRow = await firstWorkflowRow(page) - await expect.poll(async () => (await compactRow.boundingBox())?.height ?? 0).toBeLessThan(comfortableHeight) + // Perceptibility floor: a density mode the eye can't catch fails its + // one job -- compact must reclaim at least 6px per row, not merely + // measure smaller. + await expect.poll(async () => (await compactRow.boundingBox())?.height ?? 0).toBeLessThanOrEqual(comfortableHeight - 6) await page.reload() const afterReloadRow = await firstWorkflowRow(page) diff --git a/frontend/src/app/index.css b/frontend/src/app/index.css index 3262a21e..86b9fc84 100644 --- a/frontend/src/app/index.css +++ b/frontend/src/app/index.css @@ -49,9 +49,12 @@ separate Wails window/document with no .app-shell element of its own (docs/adr/0033), and this rule must reach both. 4px is Primer's own --base-size-4 step, ~67% of ActionList's 6px default row padding -- - the dominant lever among the in-scope surfaces' current values. */ + the dominant lever among the in-scope surfaces' current values. + 2px, not a timid step down: a density mode a user cannot SEE at a + glance fails its one job (the 6px->2px cut reads clearly across any + multi-row list; the 44px mobile floor below still wins). */ :root[data-density="compact"] { - --mill-density-row-pad-y: var(--base-size-4, 4px); + --mill-density-row-pad-y: var(--base-size-2, 2px); } /* Touch-target floor (docs/goals/0096's DoR: "floor wins over density"): at the companion breakpoint, compact's row padding