fix(ui-pagination): make Pagination wrap on smaller screen sizes and prevent scrollbars

[ToMESSKa]

INSTUI-4461

ISSUE:

• on smaller screen sizes the Pagination has a horizontal scrollbar
• in some cases it has a vertical scrollbar and page buttons and their focus ring aren't fully visible when the parent has no padding

TEST PLAN:

test no horizontal scrollbars:

• open the examples in Pagination
• click Inspect then switch to mobile device view
• when exceeding the width of the container, the pagination numbers should wrap instead of a horizontal scrollbars appearing, and the new lines should be centered (similarly to the the legacy examples)

test no vertical scrollbars:

• go to the first example, click Inspect and on the Styles tab remove the preview parent element's (class="css-kinttp-preview") padding
• while the parent's padding removed, try when no margin prop is provided
• while the parent's padding removed when no margin prop is provided, the component should have NO vertical scrollbars (make sure you hover over the component and try scrolling with the mouse too)
• while the parent's padding removed and when no margin prop is provided, the click on the page buttons and make sure the buttons including their focus rings should remain fully visible (e.g. their top or bottom edges should not covered by the parent checkerboard container)

[github-actions]

PR Preview Action v1.6.0
Preview removed because the pull request was closed.
2025-04-02 07:12 UTC

[matyasf]

nice work!

[balzss]

why is this needed? and why this value?

[balzss]

instead of adding a margin here (so focusring isn't cut of), you could set the default margin to something like space8 (just make sure to use something from the new set of spacing tokens and not something like xSmall). this makes sure that when devs are implementing a design they don't have to deal with random margin around the component

[ToMESSKa]

@balzss removed the 0.3rem margin and set a default 'space8' margin