[Table]: The message strip cuts off the table

[wilson-xu-sap]

Describe the bug

Isolated Example

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

Reproduction steps

No response

Expected Behaviour

No response

Screenshots or Videos

Screen.Recording.2026-05-08.at.11.22.52.mov

UI5 Web Components for React Version

2.21.3

UI5 Web Components Version

2.21.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

Hi @wilson-xu-sap

to solve this issue, you can isolate the stacking context of the Table by setting isolation: isolate or z-index:0 on the host: https://stackblitz.com/edit/github-osb5gybo-vtacntpg?file=src%2FApp.tsx%3AL102

After this PR has been merged, the stacking context of the ObjectPage section content will also be isolated. Since this might be a good improvement on the ui5-table component itself, I'm going to forward this issue to the ui5/webcomponents repo, so they can check as well.

---

Hi Colleagues,

The ui5-table-header-row with sticky uses position: sticky; z-index: 3 on the header row element. Since the Table's :host doesn't create a stacking context, this z-index: 3 participates in the parent's stacking context. This means the table header row paints on top of any external sibling sticky element with z-index: 3 or lower.

Consumers can work around this by setting isolation: isolate or z-index: 0 on the ui5-table element (since :host already has position: relative, this creates a stacking context). In my opinion however, it would be cleaner if the Table contained its own z-indexes by default.

Suggested improvement: add isolation: isolate to the :host rule:

:host {
  display: block;
  position: relative;
  isolation: isolate;
  /* ... */
}

Alternatively, since :host already has position: relative, adding z-index: 0 achieves the same containment:

:host {
  display: block;
  position: relative;
  z-index: 0;
  /* ... */
}

Both approaches prevent the internal z-index: 3 from leaking out and interfering with external stacking contexts (Example).