Uh oh!
There was an error while loading. Please reload this page.
fix(web): add close icon for slow request toast - #2040
Conversation
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
kendalled
commented
Apr 15, 2026
Thank you for all of your work on T3 code so far @t3dotgg and @juliusmarminge !! I just wanted to contribute because this has really been bugging me personally and I bet it has bothered or confused others too. Thanks! |
| {tooltipStyle ? ( | ||
| <Toast.Content className="pointer-events-auto px-2 py-1"> | ||
| <Toast.Title data-slot="toast-title" /> | ||
| </Toast.Content> |
There was a problem hiding this comment.
🟢 Lowui/toast.tsx:429
When tooltipStyle and showCloseButton are both true, the close button overlaps Toast.Title because the tooltip branch lacks the pr-8 padding present in the non-tooltip branch. Add right padding to the tooltip Toast.Content when showCloseButton is enabled.
{tooltipStyle ? (
- <Toast.Content className="pointer-events-auto px-2 py-1">+ <Toast.Content+ className={cn(+ "pointer-events-auto px-2 py-1",+ toast.data?.showCloseButton ? "pr-8" : null,+ )}+ >
<Toast.Title data-slot="toast-title" />
</Toast.Content>
) : (🤖 Copy this AI Prompt to have your agent fix this:
In file apps/web/src/components/ui/toast.tsx around lines 429-432:
When `tooltipStyle` and `showCloseButton` are both `true`, the close button overlaps `Toast.Title` because the tooltip branch lacks the `pr-8` padding present in the non-tooltip branch. Add right padding to the tooltip `Toast.Content` when `showCloseButton` is enabled.
Evidence trail:
apps/web/src/components/ui/toast.tsx lines 417-437 at REVIEWED_COMMIT:
- Lines 417-427: Close button rendered when `toast.data?.showCloseButton` is true, positioned `absolute top-2 right-2 z-10`
- Lines 429-431: Tooltip branch has `className="pointer-events-auto px-2 py-1"` with no conditional padding for close button
- Lines 432-437: Non-tooltip branch has `toast.data?.showCloseButton ? "pr-8" : null` conditional padding
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 17d9bd1. Configure here.
| type: "warning" as const, | ||
| data: { | ||
| showCloseButton: true, | ||
| }, |
There was a problem hiding this comment.
Close button leaves stale ref, preventing toast re-show
Medium Severity
When the user clicks the close button, toastManager.close(toast.id) dismisses the toast, but toastIdRef.current in SlowRpcAckToastCoordinator is never cleared. On subsequent slowRequests changes, the coordinator takes the toastManager.update(toastIdRef.current, ...) branch, which silently no-ops on a closed toast. The slow-request warning never reappears until requests drop to zero and rise again — effectively suppressing the notification permanently after one dismissal.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 17d9bd1. Configure here.
kendalled
commented
Apr 15, 2026
#2023 seems like a more efficient fix, Apologies for not seeing it! I started working on this the second that was opened yesterday. I am usually very careful with PR's and contributions but it's just weird timing. Thank you and sorry to bother. Happy this is getting addressed. |
ApprovabilityVerdict: Needs human review Review comments identify a logic bug: dismissing the toast leaves a stale ref that prevents the slow-request notification from reappearing on subsequent events. This behavioral issue should be addressed before merging. You can customize Macroscope's approvability policy. Learn more. |
Move the close button from inline (vertically centered) to absolute top-right positioning matching the t3 design language. Add pr-8 padding to toast content to prevent text overlap with the dismiss button. Addresses review feedback from juliusmarminge referencing pingdotgg#2040 styling.
What Changed
showCloseButtonin toast data.xclose control whenshowCloseButtonis enabled. This is in line with the styling of the buttons in the settings menu to stay in theme. Design taken from "refresh provider" button to maintain consistency.showCloseButtonfor theSome requests are slowwarning toast inSlowRpcAckToastCoordinator.Why
The slow-requests toast is pinned (
timeout: 0) and was only dismissible via swipe/drag, which is not discoverable on desktop and feels touch-centric. Many users would probably think it's stuck and struggle to dismiss it (including me).Adding an explicit close control makes dismissal obvious and reliable without changing the underlying slow-request detection behavior.
UI Changes
Before:
Some requests are slowtoast had no visible dismiss control.Screenshot:
After:
Some requests are slowtoast includes a subtle top-rightxclose control.Screenshot:
Interaction video:
xto dismiss the toast.Video:
Screen.Recording.2026-04-15.at.5.42.37.PM.mov
Checklist
Note
Low Risk
UI-only change to toast rendering and metadata; minimal risk beyond minor layout/styling regressions for toasts that opt into the new close button.
Overview
Adds an opt-in
showCloseButtonflag to toast data and updates both stacked and anchored toast renderers to display a top-right X dismiss control (with padding adjustments) when enabled.Enables this flag for the persistent (timeout
0) “Some requests are slow” warning inSlowRpcAckToastCoordinator, making it explicitly dismissible on desktop.Reviewed by Cursor Bugbot for commit 17d9bd1. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Add close button to slow request toast
XIconclose button to toasts that setdata.showCloseButton: truein toast.tsx, wiring it totoastManager.close(toast.id)for bothToastsandAnchoredToastscomponents.showCloseButton: trueon the slow-ack warning toast in WebSocketConnectionSurface.tsx.pr-8right padding to toast content when the close button is present to prevent text overlap.📊 Macroscope summarized 17d9bd1. 2 files reviewed, 1 issue evaluated, 0 issues filtered, 1 comment posted
🗂️ Filtered Issues