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

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>
));

1. Fire a shorter custom toast shortly after:

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

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

Demo

▶ Watch the bug in action

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

Additional context

• Default toast('string') stacking is unaffected — isolated to toast.custom() / JSX toasts
• Related broader discussion: #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.