Pagination: becomes broken when it is placed inside a flex container.

[vannizhang]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

The calcite-pagination component becomes broken when I have it placed inside of flex container (a div element that has display set to flex).

Here is what is an example of what I see:

Expected Behavior

It should just render as what we see from the example of the doc:

Reproduction Sample

https://codepen.io/vannizhang/pen/abxmKxV

Reproduction Steps

1. Open the codepen link that I provided above.
2. You should see two calcite-pagination components there.
3. The first one looks broken as it it placed inside a flex container.

Reproduction Version

2.6.0

Relevant Info

Windows 10. Chrome 122.

Regression?

1.4.3

Priority impact

p2 - want for current milestone

Impact

Several pages of the the Living Atlas Website uses this component:

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [X] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Living Atlas

[macandcheese]

As a workaround you can set width: 100% on the Pagination element: https://codepen.io/mac_and_cheese/pen/XWQNrMd

[geospatialem]

Related: https://github.com/Esri/calcite-design-system/issues/8420

[gpbmike]

Does anyone have a way to horizontally center the pagination while using the full container width?

edit: n/m it looks like justify-content: center; does the trick.