fix(web): align spacing values to 4px grid #71

Closed
opened 2026-02-13 19:01:02 +00:00 by forbes · 0 comments
Owner

Ref: docs/STYLE.md § Spacing

Base unit is 4px. All spacing must be multiples of 4. The codebase has ~40 instances of non-aligned values.

Padding violations (not 4px multiples):

  • 0.1rem (1.6px) — TagInput.tsx:125, :175
  • 0.2rem (3.2px) — SettingsPage.tsx, SchemasPage.tsx, AppShell.tsx
  • 0.3rem (4.8px) — SettingsPage.tsx, ProjectsPage.tsx, SchemasPage.tsx

Margin violations:

  • 0.6rem (9.6px) — EditItemPane.tsx:187
  • 0.3rem gap (4.8px) — PropertiesTab.tsx:139

Height violations (below 4px):

  • height: 2 (2px) — FileDropZone.tsx:193
  • height: 1 (1px) — CreateItemPane.tsx:581
  • borderRadius: 1 (1px) — FileDropZone.tsx:195, :204
  • marginTop: 2 (2px) — FileDropZone.tsx:196

Fix: Round all spacing to nearest 4px multiple. For 1-2px elements (dividers/progress bars), use standard 1px solid borders or 4px height minimums as appropriate.

**Ref:** `docs/STYLE.md` § Spacing Base unit is 4px. All spacing must be multiples of 4. The codebase has ~40 instances of non-aligned values. **Padding violations (not 4px multiples):** - `0.1rem` (1.6px) — TagInput.tsx:125, :175 - `0.2rem` (3.2px) — SettingsPage.tsx, SchemasPage.tsx, AppShell.tsx - `0.3rem` (4.8px) — SettingsPage.tsx, ProjectsPage.tsx, SchemasPage.tsx **Margin violations:** - `0.6rem` (9.6px) — EditItemPane.tsx:187 - `0.3rem` gap (4.8px) — PropertiesTab.tsx:139 **Height violations (below 4px):** - `height: 2` (2px) — FileDropZone.tsx:193 - `height: 1` (1px) — CreateItemPane.tsx:581 - `borderRadius: 1` (1px) — FileDropZone.tsx:195, :204 - `marginTop: 2` (2px) — FileDropZone.tsx:196 **Fix:** Round all spacing to nearest 4px multiple. For 1-2px elements (dividers/progress bars), use standard `1px solid` borders or `4px` height minimums as appropriate.
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kindred/silo#71