[bug]: Safari scrolls to top on pagination in DataTable (dashboard example) due to @container/main query

[zammitjohn]

Describe the bug

Clicking the pagination buttons in the DataTable component on the dashboard example causes the page to unexpectedly scroll to the top, but only in Safari.

After some investigation, this appears to be caused by the @container/main container query in page.tsx. Safari handles container queries differently from Chrome when DOM updates occur. Specifically, when pagination triggers a DOM change, Safari recalculates container dimensions and resets the scroll position as part of its reflow process.

Affected component/components

Sidebar

How to reproduce

1. Open the dashboard example in Safari.
2. Scroll down if needed and click a pagination button in the DataTable.
3. The page scrolls to the top unexpectedly.

The scroll position should remain unchanged when paginating.

Codesandbox/StackBlitz link

No response

Logs

System Info

* Browser: Safari (tested on latest version 18.4)
* OS: macOS

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues