Pager is misaligned when the FlatTable scrolls horizontally

[przemyslawzalewski]

Current behaviour

When the FlatTable overflows horizontally (e.g. due to having many columns or wide entries) and has the Pager in the footer, it becomes "detached" from the parent table when scrolled:

https://user-images.githubusercontent.com/30114244/208705135-2f7580af-0ce6-4447-9833-b4c46a0615db.mov

Expected behaviour

The footer should match the table width, not the scrollable parent width (the "viewport").

CodeSandbox or Storybook URL

https://codesandbox.io/s/friendly-colden-y16igk

JIRA Ticket (Sage Only)

SBS-34541

Suggested Solution

As the table and the Pager are nested within unrelated containers, it may be needed to restructure the containment to get this fixed. Please notice the mismatch between the table, container and the footer dimensions:

https://user-images.githubusercontent.com/30114244/208706401-1a8a7d90-0b5b-4757-9823-c562ba7e4e5b.mov

Carbon Version

111.8.0

Design Tokens Version

2.64.0

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[tomdavies73]

FE-5595

[carbonci]

:tada: This issue has been resolved in version 114.10.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[DipperTheDan]

Issue has been re-opened as v119.3.1 re-introduces this bug back in to Carbon.

[DipperTheDan]

New ticket has been created to address this bug since it was re-introduced. FE-6058.

[JinCoreana]

Hi @DipperTheDan I would like to share one more example of the misalignment. https://nvkrg6.csb.app/

when the total width of the pager elements surpasses the table width, having a right sticky column causes the horizontal scrollbar to generate additional space equivalent to PagerWidth - TableWidthpx.