next.js
c10f0833 - dev-overlay: polish error header layout and instant fix-card chip (#94790)

Commit
39 days ago
dev-overlay: polish error header layout and instant fix-card chip (#94790) ### What? Polish pass on the dev-overlay error UI: - **Toolbar moved into the dialog header.** Copy / Docs / Node Inspector icons now sit on the right of the title row, next to the error type badge. - **Title row layout.** Badge group on the left, toolbar on the right; error message renders below on its own line. Replaces the previous `column-reverse` layout. - **Instant Insights fix cards.** Per-card chip now reads `✦ Copy as prompt` with a sparkle glyph, pill-shaped border, soft hover. Floats halfway above each card (previous position, restored after a couple of iterations). - **`error-cause` spacing.** `.error-cause-message` gets `margin: 0 0 16px 4px` so "Caused by: …" blocks have breathing room below. - **Sparkle icon.** New shared SVG at `icons/sparkle.tsx` for the prompt chip. ### Why? The error toolbar was floating in the top bar, separated from the error it acted on. Moving it into the dialog header alongside the badge keeps the error-scoped actions with the error itself, and frees the top bar for the global version-staleness signal. The badge-above-message ordering follows up on the Instant Insights work — the type label is the primary scanning signal. <img width="2120" height="1712" alt="CleanShot 2026-06-13 at 12 59 17@2x" src="https://github.com/user-attachments/assets/d4000c9e-1867-49a4-9a48-229e57fa2df7" /> <img width="2134" height="1504" alt="CleanShot 2026-06-13 at 22 39 37@2x" src="https://github.com/user-attachments/assets/1b8bfa0a-3f90-4ea8-bee8-3fb0fad59aec" />
Author
Parents
Loading