Confirmation dialog styling centralized in editor UI
AI instance confirmation dialogs across the editor now share three reusable components, eliminating hundreds of lines of duplicated CSS while fixing button variant bugs that could have caused rendering issues.
Instance AI confirmation dialogs in the editor had accumulated duplicated styling across seven different components. The CSS for footers, preview text boxes, and split buttons was copy-pasted with minor variations, making maintenance difficult and visual consistency hard to guarantee.
Three new components are being introduced: handles dialog action areas with configurable layouts (row-end, row-between, column) and optional borders; standardizes monospace text display for URLs and descriptions; wraps the button-plus-dropdown pattern with proper border handling for both solid and outline variants.
Bug fixes are included: and had type="primary" on buttons, which was incorrect—the variant prop was needed instead, accepting "solid", "outline", or "destructive".
The refactor also bumps confirmation message and preview text to 14px and cleans up redundant padding. All seven dialog types (domain access, gateway resource, credential setup, workflow setup, Q&A wizard, plan review, and generic approval) now render consistently with a single source of truth for their shared patterns.
View Original GitHub Description
Summary
- Extract 3 shared components (
ConfirmationFooter,ConfirmationPreview,SplitButton) from 7 instance AI confirmation dialog components to eliminate duplicated CSS and ensure visual consistency - Fix button variant bugs (
type="primary"→variant="solid") inInstanceAiQuestionsandPlanReviewPanel - Bump confirmation message and preview text to 14px for better readability
- Clean up redundant margins/paddings across confirmation dialogs
Test plan
- Verify all 7 confirmation dialog types render identically to before (generic approval, domain access, gateway resource, credential setup, workflow setup, Q&A wizard, plan review)
- Check split button appearance in both solid and outline variants
- Verify light and dark mode rendering
- Run
pnpm typecheckin editor-ui
🤖 Generated with Claude Code