Files
bolt-diy/app/styles/components/toast.scss
Stijnus 4e37f5a80c fix: resolve toast message visibility and deployment success notifications
## Issues Fixed
- Toast messages appearing in background/blurred due to z-index conflicts
- Missing success toast notifications for deployment completions
- Scoped ToastContainer limiting toast visibility to chat component only

## Changes Made

### Global Toast System
- Move ToastContainer from Chat.client.tsx to root.tsx for global availability
- Add highest z-index (1000) to ensure toasts appear above all UI elements
- Remove duplicate ToastContainer from chat component

### Z-Index System Updates
- Add .z-toast class with z-index: $zIndexMax + 1 (1000)
- Apply toast z-index to .Toastify__toast-container in toast.scss
- Ensure proper layering hierarchy for all toast messages

### Deployment Success Notifications
- Add missing toast.success() calls to all deployment services:
  - NetlifyDeploy: "🚀 Netlify deployment completed successfully!"
  - VercelDeploy: "🚀 Vercel deployment completed successfully!"
  - GitHubDeploy: "🚀 GitHub deployment preparation completed successfully!"
  - GitLabDeploy: "🚀 GitLab deployment preparation completed successfully!"

## Result
- All toast messages now appear in foreground with proper z-index
- Deployment success notifications are clearly visible to users
- Consistent toast behavior across the entire application
- No more blurred or background toast messages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-29 14:05:22 +02:00

24 lines
452 B
SCSS

@use '../z-index';
.Toastify__toast-container {
@extend .z-toast;
}
.Toastify__toast {
--at-apply: shadow-md;
background-color: var(--bolt-elements-bg-depth-2);
color: var(--bolt-elements-textPrimary);
border: 1px solid var(--bolt-elements-borderColor);
}
.Toastify__close-button {
color: var(--bolt-elements-item-contentDefault);
opacity: 1;
transition: none;
&:hover {
color: var(--bolt-elements-item-contentActive);
}
}