Fix collapsed toast stack height and text wrapping overflow

[juliusmarminge]

Summary

• prevent collapsed toasts from clipping by computing --toast-calc-height as the max of shared front-most height and each toast’s own height
• improve layout resilience for long title/description content by adding min-w-0, flex-1, and break-words in toast content rows
• keep toast action buttons stable in constrained layouts by adding shrink-0
• apply the same overflow protections to both standard and anchored toast variants

Testing

• Not run (no test or lint/typecheck results were provided in this change context)
• Suggested manual check: trigger multiple stacked toasts with long title/description text and verify no content overflows before/after hover-expand
• Suggested manual check: verify action button remains visible and does not compress text unexpectedly in narrow widths

---

Note

Low Risk
Low risk UI-only change that tweaks toast CSS variables and flex layout to avoid clipping/overflow; potential impact is limited to toast rendering and animations.

Overview
Fixes collapsed toast stack clipping by changing --toast-calc-height to use the max of Base UI’s shared front-most height and each toast’s own --toast-height.

Improves resilience to long titles/descriptions by adding min-w-0, flex-1, and break-words to toast content containers, and keeps action buttons visible by applying shrink-0 (applied to both standard and anchored toast variants).

^{Written by Cursor Bugbot for commit 9c1df87. This will update automatically on new commits. Configure here.}

Note

Fix collapsed toast stack height and text wrapping in Toasts and AnchoredToasts in toast.tsx to prevent overflow

Adjust --toast-calc-height to use max() of shared front-most height and per-toast height; add min-w-0, flex-1, and break-words to content, title, and description; prevent Toast.Action from shrinking with shrink-0 and wrap className with cn(...).

📍Where to Start

Start with the Toasts component height calculation and layout changes in toast.tsx.

^{Macroscope summarized 9c1df87.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 45669cce-1fa1-4ae5-8bc4-dbec53045a27

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/fix-toast-height-overflow

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}