Prevent TablePaginator page buttons from being overlapped

[r100-stack]

Changes

After PR TODO from #2152.

The next button was not clickable after going to the next pages a few times because the right content was overlapping the page buttons. This overlap was happening because when the scrollWidth was increasing, the useOverflow() algorithm was not recalculating.

The best way would be to re-run the useOverflow() calculations when the scrollWidth changes. But that was not straightforward to do (thread).

So for now, I just went with giving the iui-center in the table paginator a higher z-index (#2316 (comment)). I also added an after-PR TODO to search for a better approach.

Old PR description subset that could be helpful when working on the better approach

I have been trying to find another way to trigger the useOverflow() re-calculations. E.g. moving the key inside OverflowContainerComponent from #2154:

iTwinUI/packages/itwinui-react/src/utils/components/OverflowContainer.tsx

Lines 113 to 115 in 528cf54

	const key =
	`${itemsCount}` +
	`${overflowOrientation === 'vertical' ? size?.height : size?.width}`;

I felt like doing that to keep similar code together and also so that other components that use OverflowContainer can also listen to their scrollWidth changes. However, I wasn't able to find a way that works well. Open to ideas for any improvements.

Testing

Could not think of a good way to test the overlapping. So, did not add any tests.

Before	After
Before.mov	After.mov

Docs

Added one react changeset and one css changeset.

After PR TODOs

• Find a better solution than the one in this PR (#2316 (comment)).