[Bug]: Inline Toaster behaves differently in overlay drawer

[flora8984461]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Xeon(R) W-2133 CPU @ 3.60GHz
    Memory: 51.85 GB / 63.57 GB
  Browsers:
    Edge: Spartan (44.22621.1105.0), Chromium (109.0.1518.78)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/6zd6sn?file=src%2Fexample.tsx

Bug Description

Actual Behavior

When using inline toaster on overlay drawer, the toaster is covered by contents in the drawer.

This does not happen if we use Nextjs with fluentui/react-components v9.47.1, but starts to happen on v9.49.1.

An example of using Nextjs with fluentui/react-components v9.47.1:
https://stackblitz.com/edit/stackblitz-starters-ekzfbi?file=components%2FExample.tsx
But this had issue (#30942) of spread warning.

An exmaple of using Nextjs with fluentui/react-components v9.49.1:
https://stackblitz.com/edit/stackblitz-starters-ekzfbi?file=package.json

It is happening if we use Vite with fluentui/react-components v9.47.1 and higher.
Example: https://stackblitz.com/edit/6zd6sn?file=src%2Fexample.tsx

Expected Behavior

Expect the toaster not being covered by the content.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[Hotell]

@flora8984461 you meant with fluentui/react-components v4.47.1: v9.47.1` ? there is no version 4 of react-components

[Hotell]

might be issues in both Toaster/Drawer. can you please take a look @ling1726 @marcosmoura ? ty

[flora8984461]

@flora8984461 you meant with fluentui/react-components v4.47.1: v9.47.1` ? there is no version 4 of react-components

Sorry for the confusion! It was a typo, I just updated in the description. Yes, they should be 9. @Hotell Thank you for the help!

[marcosmoura]

The Toaster is inline and it'll be rendered where it is placed. Since the code in the example declares the Toaster inside the Drawer and not inside the DrawerBody, the toast might get covered by the content.

The issue is that a Toast doesn't have a z-index defined and the DrawerBody needs to define that in the CSS.

@flora8984461 a simple fix for the problem would be moving the Toaster to the DrawerBody instead:

/* from */
<OverlayDrawer open={open} onOpenChange={onOpenChange} position="end">
  <DrawerBody>{props.mid}</DrawerBody>
  {props.toaster}
</OverlayDrawer>

/* to */
<OverlayDrawer open={open} onOpenChange={onOpenChange} position="end">
  <DrawerBody>
    {props.mid}      
    {props.toaster}
  </DrawerBody>
</OverlayDrawer>

I'm closing the issue. If there are any other concerns, please feel free to reopen :)