From 61ee7af9e49b9203353a4901b7f1f753aa9fcd71 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sat, 15 Aug 2026 00:07:25 +0200 Subject: [PATCH] fix(ui): snap scaled root font-size to a whole pixel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The root font-size was calc(16px * var(--font-scale)); a non-integer scale (1.02 -> 16.32px) made every rem-derived box height fractional. When a filter section's visible row count changes on a facet refetch, its fractional height shifts everything below it by the sub-pixel remainder — a deterministic ~0.5px CSS move that snaps to a visible 1px jitter of the whole filter rail at DPR=1. round(calc(16px * var(--font-scale)), 1px) keeps the font-scale feature but quantises the root to an integer pixel, so metrics land on integers and the sub-pixel reflow jitter is gone app-wide. Verified: root 16.32->16px, chip row 26.453->26px, build + Lightning CSS pass round() through intact. --- frontend/src/index.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 4f69c0c5..21d79e7f 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -288,7 +288,11 @@ html[data-theme="light"] { } html { - font-size: calc(16px * var(--font-scale)); + /* Snap the scaled root font-size to a whole pixel. The base is rem-derived app-wide, so a fractional + root (e.g. 16px * 1.02 = 16.32px) makes every box height fractional — and when a reflow changes a + section's row count, the sub-pixel remainder shifts everything below it by ~0.5px, a visible 1px + jitter at DPR=1. round() keeps the font-scale feature but quantises to crisp integer metrics. */ + font-size: round(calc(16px * var(--font-scale)), 1px); background: var(--bg); }