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

## 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](https://github.com/mi6/ic-ui-kit/blob/44512a54cc667c1e09d428515a274d34b3c050ec/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx#L475C1-L476C1), combined with the restricted width provided to the component on `design.sis.gov.uk`.

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

## 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Go to page: [/components/data-table/code](https://design.sis.gov.uk/components/data-table/code)
2. Scroll down to variants, specifically [Pagination](https://design.sis.gov.uk/components/data-table/code#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.

Start at packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx around line 475, then reproduce the issue at /components/data-table/code in the Pagination variant. Check how pagination-controls-wrap and the restricted container width cause ic-pagination and go-to-page-holder to overflow. Done means the pagination sub-components remain in line, including with many table pages.

Written by the indexing model from the issue text.