diff --git a/ui/desktop/src/App.tsx b/ui/desktop/src/App.tsx index 08349f84087b..33a8d222f4d8 100644 --- a/ui/desktop/src/App.tsx +++ b/ui/desktop/src/App.tsx @@ -625,7 +625,7 @@ export function AppInner() { text-text-on-accent bg-background-inverse ` } - style={{ width: '380px' }} + style={{ width: '450px' }} className="mt-6" position="top-right" autoClose={3000} diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css index f5432134e036..f76417a52cf2 100644 --- a/ui/desktop/src/styles/main.css +++ b/ui/desktop/src/styles/main.css @@ -373,9 +373,9 @@ .Toastify__close-button { color: var(--text-prominent-inverse) !important; opacity: 0.7; - align-self: flex-start; - margin-top: 4px; - margin-right: 4px; + align-self: center; + margin-top: 0; + margin-right: 8px; padding: 4px; border-radius: 4px; transition: diff --git a/ui/desktop/src/toasts.tsx b/ui/desktop/src/toasts.tsx index d75cb12506b8..6e3754e26579 100644 --- a/ui/desktop/src/toasts.tsx +++ b/ui/desktop/src/toasts.tsx @@ -1,5 +1,7 @@ import { toast, ToastOptions } from 'react-toastify'; import { Button } from './components/ui/button'; +import { Tooltip, TooltipContent, TooltipTrigger } from './components/ui/Tooltip'; +import Copy from './components/icons/Copy'; import { startNewSession } from './sessions'; import { useNavigation } from './hooks/useNavigation'; import { @@ -173,19 +175,41 @@ function ToastErrorContent({ }: Omit) { const setView = useNavigation(); const showRecovery = recoverHints && setView; + const hasBoth = traceback && showRecovery; + + const handleCopyError = async () => { + if (traceback) { + try { + await navigator.clipboard.writeText(traceback); + } catch (error) { + console.error('Failed to copy error:', error); + } + } + }; return ( -
+
{title && {title}} {msg &&
{msg}
}
- {showRecovery ? ( + {showRecovery && ( - ) : traceback ? ( - - ) : null} + )} + {hasBoth && ( + + + + + + Copy error + + + )} + {traceback && !hasBoth && }
);