Reported as "some spacing issues throughout" — and the cause shows up clearly in the CSS: spacing is ad-hoc per component rather than drawn from a scale.
Current state
padding / margin / gap across the layout, pages and components use 18 distinct pixel values:
1 2 3 4 5 6 7 8 10 12 14 16 20 24 28 32 40 60Frequency is telling — 6px (30 uses), 8px (21), 16px (18), 12px (18), 4px (17), then a long tail of 14px (11), 10px (9), 5px, 7px, 3px. The 4/8/12/16 cluster is a real grid; the 3/5/6/7/10/14/28 values are drift around it, and that drift is what reads as inconsistent.
macOS itself is built on 8pt with 4pt half-steps. Aligning to that is most of the fix.
Proposed
- Define spacing tokens on the same
:rootas the color tokens (--space-1…--space-8, on a 4/8pt scale) — pairs naturally with #20, and both passes touch the same declarations, so doing them together halves the churn. - Snap the off-grid values to the nearest step.
5px/6px/7px→4or8;10px→8or12;14px→12or16;28px→24or32. Each needs a look rather than blind rounding — some are deliberate optical adjustments, particularly the6pxnav-item padding and the0.5pxhairlines, which should stay as they are. - Audit the panels against each other. The seven panel components were written at different times and don't share a card/section rhythm — same-role elements should have the same padding across
CleanupPanel,DiskPanel,ProcessesPanel,StartupPanel,ExtensionsPanel,DashboardCardsandTopProcesses. - Check the sidebar-to-content and section-title rhythm specifically.
.sidebar-section-titleuses12px 8px 4pxwith a4pxtop margin, which is four different values in one rule. - Verify at the small window sizes the app actually runs at — this is a desktop app with a fixed 220px sidebar and
overflow: hidden, so spacing problems show up as clipping rather than reflow.
Note
components/ and partials/ hold seven byte-identical copies of each panel (detail in #20). Same caveat applies: fix that first, or every spacing change lands twice.