Fix inconsistent modal overlays by migrating all custom implementations
to the unified shadcn/ui Dialog component with proper z-index layering.
Changes:
- Update Dialog component to support three z-index levels:
- base (z-40): First-level dialogs
- nested (z-50): Nested dialogs
- alert (z-[60]): Alert/confirmation dialogs (using Tailwind arbitrary value)
- Refactor all custom modal implementations to use Dialog:
- EndpointSpeedTest: API endpoint speed testing panel
- ClaudeConfigEditor: Claude common config editor
- CodexQuickWizardModal: Codex quick setup wizard
- CodexCommonConfigModal: Codex common config editor
- SettingsDialog: Restart confirmation prompt
- Remove custom backdrop implementations and manual z-index
- Leverage Radix UI Portal for automatic DOM order management
- Ensure consistent overlay behavior and keyboard interactions
This eliminates the "background residue" issue where overlays from
different layers would conflict, providing a unified and professional
user experience across all modal interactions.
Convert all MCP-related modal windows to use the unified shadcn/ui Dialog
component for consistency with the rest of the application.
Changes:
- McpPanel: Replace custom modal with Dialog component
- Update props from onClose to open/onOpenChange pattern
- Use DialogContent, DialogHeader, DialogTitle components
- Remove custom backdrop and close button (handled by Dialog)
- McpFormModal: Migrate form modal to Dialog
- Wrap entire form in Dialog component structure
- Use DialogFooter for action buttons
- Apply variant="mcp" to maintain green button styling
- Remove unused X icon import
- McpWizardModal: Convert wizard to Dialog
- Replace custom modal structure with Dialog components
- Use Button component with variant="mcp" for consistency
- Remove unused isLinux and X icon imports
- App.tsx: Update McpPanel usage
- Remove conditional rendering wrapper
- Pass open and onOpenChange props directly
- dialog.tsx: Fix dialog overlay and content styling
- Change overlay from bg-background/80 to bg-black/50 for consistency
- Change content from bg-background to explicit bg-white dark:bg-gray-900
- Ensures opaque backgrounds matching MCP panel style
Benefits:
- Unified dialog behavior across the application
- Consistent styling and animations
- Better accessibility with Radix UI primitives
- Reduced code duplication
- Maintains MCP-specific green color scheme
All dialogs now share the same base styling while preserving their unique
content and functionality.
