[Bug] Custom toast bottom bleeds through shorter front toast in stacked view

[iampankajghosh]

What happened?

When using toast.custom(), stacking a short custom toast in front of a tall
custom toast causes the bottom of the taller toast to remain visually exposed
beneath the shorter one. The stack does not clip correctly.

This does not happen with default toast('text') calls — only with custom/JSX toasts.

How to reproduce

1. Fire a tall custom toast:

toast.custom(() => (
  <div style={{ padding: '20px', lineHeight: '1.6' }}>
    <strong>Tall toast</strong>
    <p>Line one</p>
    <p>Line two</p>
    <p>Line three</p>
  </div>
));

2. Fire a shorter custom toast shortly after:

toast.custom(() => (
  <div style={{ padding: '12px' }}>Short toast</div>
));

3. Watch the stack collapse — the bottom of the tall toast bleeds through
   the short front toast.

Demo

before-fix.mp4

Expected behavior

The front (shorter) toast should fully mask the toast behind it, matching
how default toasts behave in a stack.

Actual behavior

The bottom portion of the taller back toast is visible below the shorter
front toast, breaking the stacked card illusion.

Environment

sonner	latest (v2.x)
React	18+
Browsers	Chrome, Firefox, Safari

Additional context

• Default toast('string') stacking is unaffected — isolated to toast.custom() / JSX toasts
• Related broader discussion: Challenges by customizing sonner #632 (point 3) — this report isolates the specific visual regression

I'd be happy to submit a PR for this if the fix direction looks good to maintainers.