bug: Very long LdPagination size increases parents container width

[mkilp]

trafficstars

Prerequisites

• [X] I know how to contribute a proper bug report.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Liquid version

latest

Framework bindings

React

Current behavior

A very long LdPagination in a container with max-width causes scrolling to overflow.

Expected behavior

Scrolling should not overflow.

Steps to reproduce

See Code repo.

Code reproduction URL

https://codesandbox.io/p/devbox/ldpagination-28fjz2?file=%2Fsrc%2FApp.js%3A16%2C1

Additional information

No response

[renet]

It seems like the text-align: center; style on the .App class in the css file is causing these issues. To center-align the pagination, please consider removing this style and adding margin: auto; to the Container, instead. This should fix the issue.

@mkilp Can you confirm that this fixes the issue?

[mkilp]

@renet Your suggestions did not fix the issue unfortunately. In our prod application we had to play around with overflow-x: hidden; on some of the parent containers but that is obviously not intended.

I updated the codesandbox with your suggestions for your to review.

[renet]

@mkilp The margin: auto; should not be added to the .App, but to the Container (using styled components). Does this help?

If this does not help in your production environment, please add a sandbox showcasing exactly the issue that you're having in the prod environment.

[mkilp]

@renet adding margin:auto; does to the container does sadly not do anything.

Even in the sandbox the component is still causing the container / page to overflow. I removed the container and any added styles. I'd assume the hidden numbers should not cause the page to go that wide but fit within the existing viewport.

[renet]

Ah, I totally get your point now. I was mislead by the more obvious visual bug that was caused by text-align: center; in the sandbox. I got you now and will look into this. There is a workaround that should fix this issue:

ld-pagination::part(wrapper) {
  overflow: hidden;
}

should do the job. Can you please confirm?

[renet]

@mkilp Did the last workaround solve your problem?