## 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>
24 lines
452 B
SCSS
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);
|
|
}
|
|
}
|