fix: clip custom toast content overflow in stacked view

[iampankajghosh]

What does this PR fix?

Fixes #748

Problem

When using toast.custom(), stacking a short toast in front of a tall toast
causes the bottom of the taller toast to bleed through the shorter front toast.
Default toasts are unaffected — the issue is isolated to custom/JSX toasts.

Root Cause

Sonner clips the stack using --front-toast-height on the list container. For
default toasts, overflow is handled implicitly by their internal structure. For
custom toasts, the [data-content] wrapper grows to its natural content height
and punches through the parent's clipped boundary because it never receives
overflow: hidden or height: 100%.

Fix

Added a CSS rule scoped to [data-front='false'] that constrains [data-content]
to the parent's height and clips the overflow:

[data-sonner-toast][data-front='false'] [data-content] {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

This is tightly scoped — it only applies to non-front toasts in the stack,
so it has zero impact on the front toast or any other state.

Testing

Manually verified with tall + short toast.custom() combinations in
Chrome, Firefox, and Safari.

Demo

Before

before-fix.mp4

After

after-fix.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sonner	Error		Mar 4, 2026 11:26am

[iampankajghosh]

Gentle ping! Happy to make any changes if needed. cc @emilkowalski

[mnsrv]

hi, thank you for fix and nice video!

just wanted to say that for position="top-*" it cuts wrong

it's due to separate bug, that in position="top-*" children are growing from top, not the bottom. but still worth mentioning here, I think