Sticky header breaks when setting overflow in an parent element

[brentswisher]

Expected behavior
The header always stays sticky when scrolling vertically if hasStickyHeader is set to true

Actual behavior
The header will revert to its default relative positioning and not scroll with the table when overflow is applied to a parent node of the table. (This is often done on the table's container to enable horizontal scrolling.)

Steps to reproduce the issue

1. Create a table with a sticky header
2. Set something like overflow-x: scroll on the parent node of the container
3. Scroll the table, and see the header no longer sticks to the top of the window as expected

Screenshots or code
Recording: https://github.com/user-attachments/assets/0a2532d4-6480-4b9a-98f0-77e20497078a

Pharos version
Latest develop branch (Unreleased change)

Your environment

• OS: macOS
• Browser: Chrome
• Version: 129.0.6668.60

Additional information
This appears to be a known problem with using position:sticky and has a long running open issue in the css spec: w3c/csswg-drafts#865.

One option I considered was to add a fixed height to the table - but I don't think that will work in the context of a design system

Another is not using position:sticky and using a javascript based sticky header instead. That might be the best way forward, we are already using a InteractionObserver to set an active state, we could likely repurpose that to trigger a position: fixed at the appropriate time when hasStickyHeader is set, which would get around the issue altogether