[ProgressIndicator]: [problem with z-index style when used in scrollable components like ObjectPage]

[BloggingWithJan]

Describe the bug

When using a ProgressIndicator in scrollable components like ObjectPage the style z-index of the ProgressIndicator leads to problems

Isolated Example

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

Reproduction steps

1. Scroll down

Expected Behaviour

The ProgressIndicator is in the background. The ProgressIndicator is not visible/don't overlap the ObjectPageHeader.

Screenshots or Videos

UI5 Web Components for React Version

"@ui5/webcomponents-react": "~1.25.0",

UI5 Web Components Version

"@ui5/webcomponents": "~1.22.0",

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

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

[Lukas742]

Hi @BloggingWithJan

you can apply position: relative; z-index: 0; to the ProgressIndicator to prevent this behavior.
But since I assume that this behavior is not intended, I'll transfer the issue to the ui5-webcomponents repo, since the component is developed there.

---

Hi colleagues,

this issue is similar to #7697.
In my opinion the stacking context should not "escape" the web component, or should at least be customizable. I've created a stackBlitz example to demonstrate the issue without our ObjectPage implementation and I also added internal styles which seem to fix the issue.

[kskondov]

Hello, the issue is reproducible in the provided samples, the progress indicator goes over other components when scrolling. @Lukas742 proposed a possible solution @SAP/ui5-webcomponents-topic-p can you please take a look?
Best Regards