[BUG] - Pagination handles large numbers poorly

[jrr]

HeroUI Version

"@heroui/react": "2.6.14"

Describe the bug

Five-digit numbers get clipped:

(and available props don't seem to help - isCompact, size, etc.)

Your Example Website or App

https://stackblitz.com/edit/bwaypyle?file=App.jsx

Steps to Reproduce the Bug or Issue

Visit the above stackblitz, or use any of them from the docs page, and set props to large numbers like this:

<Pagination initialPage={12344} total={12345} />;

Expected behavior

I'd expect the style to accommodate large numbers, by expanding the bubbles, shrinking the text, etc. Or, absent that, the docs page could illustrate how to customize the style slots to fit them.

(In my attempts, I found that I could customize the <ul> and <li>, but changes to their geometry would break the cursor's absolutely-positioned <span>.

Screenshots or Videos

No response

Operating System Version

MacOS

Browser

Chrome

[linear[bot]]

ENG-2092 [BUG] - Pagination handles large numbers poorly

[andyngdz]

I created a discussion here https://github.com/heroui-inc/heroui/discussions/4848 I'm waiting for a signal before working on it. Facing the same issue :)

[dnslin]

Yes, I'm having the same problem with paging around 2w entries.