[Toast / Object Page]: Toast top right hidden behind OP Header

[gitgdako]

Bug Description

Showing a toast on the top right (ToastPlacement 'TopEnd') on an Object Page is not shown because the Object Header hides it

import {
  ObjectPage,
  Modals,
} from '@ui5/webcomponents-react';

...

<Modals />
<ObjectPage>
  <ObjectPageSection id={'content'} titleText={'Content'}>
    <Button
      onClick={() => {
        Modals.showToast({
          children: 'Test',
          placement: 'TopEnd',
          // FIXME this is necessary for the toast to be shown
          // style: { zIndex: 999 },
        });
      }}
    >
      Click me
    </Button>
  </ObjectPageSection>
</ObjectPage>

Affected Component

Toast / Object Page

Expected Behaviour

Toast is shown in the foreground

Isolated Example

https://stackblitz.com/edit/github-hjj3we?file=src%2FApp.tsx

Steps to Reproduce

1. Object Page
2. Show Toast in top right corner

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.4

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[dobrinyonkov]

Hello @SAP/ui5-webcomponents-topic-rl ,

the toast component is overlapped by the object page header because the header has a higher z-index. Could the popover API be leveraged to show the toast above all other content?

Kind Regards, Dobrin