ADR: Admin UI chrome — New Relic continuous-chrome pattern

Date: 2026-05-01 Status: Accepted Project: Admin Dashboard Cloudflare Migration

Context

During the Phase 1 admin-ui prototype design review, two candidate chrome patterns were compared: a New Relic-style continuous-chrome shell where the top bar and the left rail are one unified surface, and a Metronic-style framed shell where the top bar and rail are visually distinct panels with their own borders.

The initial prototype produced a “blocky” feel — the sidebar’s border-r and the top bar’s border-b met at a hard 90° corner directly beneath the brand block (which carried its own border-b), and the visual seam triangle at that intersection was visually heavy. The question for design review was whether to keep the framed pattern and refine the seams or to remove the seams entirely and let the inset content panel create the visual frame.

Decision

Adopt the New Relic continuous-chrome pattern. Preserve the existing color tokens (light- and dark-mode --sidebar-background vs. --background). Change only the structural rules below.

Structural rules

• Outer page background uses the chrome surface token: bg-sidebar. The sidebar and top bar are transparent over it — no border-r on the sidebar, no border-b on the top bar, no internal border-b on the brand block.
• Content area is wrapped in an inset panel: bg-background border-t border-l border-border rounded-tl-xl. The panel reads as the inset; the chrome carries no border.
• Top bar uses bg-sidebar/80 backdrop-blur so it stays integrated with the chrome surface while blurring scrolling content underneath.
• Collapse control is a single Stripe-style chevron pinned fixed to the sidebar/content seam at top-[4.5rem]. It animates left between left-16 (collapsed) and left-64 (expanded). The in-rail collapse button is removed — the seam chevron is the only control.

Files affected

• src/components/admin/admin-shell.tsx
• src/components/admin/sidebar.tsx
• src/components/admin/top-bar.tsx

Consequences

• The shell feels visually fluid rather than blocky.
• Existing color tokens are unchanged, so light/dark mode behavior is preserved.
• The single seam chevron consolidates collapse interaction into one obvious affordance.
• The Metronic framed pattern is explicitly rejected. If someone later asks to “add a card frame around the chrome” or “make it more like Metronic,” that reverses this decision — confirm with Jeff before changing direction.

Cross-references

• Phase 1 prototype status: 00-context.md (Update — 2026-04-30: Phase 1 prototype shipped)
• UI stack ADR: 2026-04-23-ui-stack-react-spa.md

Provenance

Content promoted from personal Claude memory entry feedback_admin_ui_chrome_pattern (originated 2026-05-01) into this ADR on 2026-06-02 as part of the team-shared-memory migration.