agent-orchestrator/.claude/rules/53-relative-units.md
DexterFromLab 3672e92b7e feat: Agent Orchestrator — multi-project agent dashboard
Tauri + Svelte 5 + Rust application for orchestrating multiple AI coding agents.
Includes Claude, Aider, Codex, and Ollama provider support, multi-agent
communication (btmsg/bttask), session anchors, plugin sandbox, FTS5 search,
Landlock sandboxing, and 507 vitest + 110 cargo tests.
2026-03-15 15:45:27 +01:00

842 B

Relative Units (CSS)

Use relative units (em, rem, %, vh, vw) for layout and spacing. Pixels are acceptable only for:

  • Icon sizes (width/height on <svg> or icon containers)
  • Borders and outlines (1px solid ...)
  • Box shadows

Rules

  • Layout dimensions (width, height, max-width, min-width): use em, rem, %, or viewport units.
  • Padding and margin: use em or rem.
  • Font sizes: use rem or em, never px.
  • Gap, border-radius: use em or rem.
  • Media queries: use em.
  • When existing code uses px for layout elements, convert to relative units as part of the change.
  • CSS custom properties for typography (--ui-font-size, --term-font-size) store px values because they feed into JS APIs (xterm.js) that require pixels. This is the only exception beyond icons/borders.