[ic-pagination-bar] in the `ic-data-table` component looks jarring because components overflow

[ropcat]

Summary of the bug

The pagination bar in the ic-data-table component looks jarring: ic-pagination is getting stacked above go-to-page-holder, leading to both components overflowing the pagination bar. Possibly because of ic-pagination-bar, line 475, combined with the restricted width provided to the component on design.sis.gov.uk.

["pagination-controls-wrap"]: this.paginationWrapped,

🪜 How to reproduce

Tell us the steps to reproduce the problem:

1. Go to page: /components/data-table/code
2. Scroll down to variants, specifically Pagination
3. Observe the overflow

📸 Screenshot

🖥 📱 Device

• Type: Desktop
• Device: MacBook Air
• OS version: macOS 14.6
• Browser version: Safari 17.6

🧐 Expected behaviour

I would expect for the sub-components of ic-pagination-bar to be in line and not overflow the component. This would ideally also include when there are a large number of pages in the table.

[mi6-577]

Is this still a problem?

In Figma there are multiple properties now which you can show/hide elements of the pagination bar as you wish;

• show items per page selector
• show item/page count
• show go to page selector

[ropcat]

Hi @mi6-577

In the end I ended up rolling my own version of the component so that it overflowed gracefully. We're still using v2 of the design system, and it looks like lots has changed since this issue was opened.

FWIW, I checked out v3 on the docs site and looks like the component is now fixed regardless of viewport size. This issue appears to no longer be an issue.

Thanks again for open sourcing the ICDS - v3 looks great!