Stabilize visible toast layout offsets to prevent hover flicker#702
Merged
juliusmarminge merged 1 commit intomainfrom Mar 9, 2026
Merged
Stabilize visible toast layout offsets to prevent hover flicker#702juliusmarminge merged 1 commit intomainfrom
juliusmarminge merged 1 commit intomainfrom
Conversation
- derive toast indices and Y offsets from the filtered visible toasts - pass frontmost height and per-toast layout vars to the viewport/item styles - add unit tests for visible toast layout calculations and height normalization
|
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)
Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
buildVisibleToastLayoutto compute stable per-toastvisibleIndexand cumulativeoffsetYfrom the currently visible toast subset0) so layout math remains predictable--toast-frontmost-height,--toast-index,--toast-offset-y)Testing
apps/web/src/components/ui/toast.logic.test.ts: verifies visible-index and offset stacking for multiple toast heightsapps/web/src/components/ui/toast.logic.test.ts: verifies missing/undefined heights are treated as0Note
Medium Risk
Changes toast stacking/positioning logic and CSS variables, which could cause visual regressions (overlap/jump/flicker) across all toast notifications. Risk is mitigated by added unit tests but still needs quick manual UI verification.
Overview
Stabilizes toast stack layout calculations by introducing
buildVisibleToastLayout, which derives a per-visible-toastvisibleIndexand cumulativeoffsetYwhile normalizing missing/invalid heights to0.Updates
toast.tsxto render from this computed layout and to pass layout-derived CSS variables (--toast-frontmost-height,--toast-index,--toast-offset-y) into the viewport/toasts, keeping the existing collapsed-content visibility behavior but using the layout’s visible count. Adds unit tests covering offset stacking and missing-height cases.Written by Cursor Bugbot for commit 95a5ce4. This will update automatically on new commits. Configure here.
Note
Compute toast stack CSS layout variables to stabilize hover offsets in
ToastsusingbuildVisibleToastLayoutin toast.tsxAdd
buildVisibleToastLayoutin toast.logic.ts to computefrontmostHeight,--toast-index, and--toast-offset-y, and updateToaststo consume these values and set CSS variables.📍Where to Start
Start with
buildVisibleToastLayoutin toast.logic.ts, then see its usage inToastsin toast.tsx.Macroscope summarized 95a5ce4.