bug: Very long LdPagination size increases parents container width about liquid HOT 6 OPEN

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?

from liquid.

@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.

from liquid.

@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.

from liquid.

@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.

from liquid.

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?

from liquid.

@mkilp Did the last workaround solve your problem?

from liquid.