style(toast): improve visibility, size, position, and duration

[kilo-code-bot]

Summary

• Reposition toast notifications from bottom-right to top-center so they are immediately visible
• Increase toast size by 50% (width 364px → 546px, padding 16px → 24px, larger font sizes for title/description)
• Add a brand yellow (--brand-primary) border to make toasts more eye-catching
• Double the display duration from 4s to 8s so users have more time to read
• Enable the close button on all toasts so users can dismiss them manually

Verification

• pnpm typecheck — passes cleanly across all workspace packages

Visual Changes

Before	After
Small toast, bottom-right, 4s duration, no close button, default border	Larger toast (50%), top-center, 8s duration, close button on hover, brand yellow border

Reviewer Notes

• The Toaster component in src/components/ui/sonner.tsx is used in both the root layout (Providers.tsx) and the admin layout (src/app/admin/layout.tsx), so this change applies globally.
• The CSS uses sonner's [data-sonner-toast] attribute selector combined with the .toast-enlarged class to scope the size overrides without affecting other elements.
• The DEFAULT_DURATION_MS constant documents sonner's default (4000ms) and makes the 2× multiplier explicit.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (2 files)

• src/app/globals.css
• src/components/ui/sonner.tsx

---

_{Reviewed by gpt-5.4-20260305 · 329,982 tokens}