Pagination not fitting on smaller screens

[FinnPaes]

Flux version

v1.1.4

Livewire version

v3.5.19

Tailwind version

v3.4.13

What is the problem?

The pagination does not fit on mobile/small screens if you have more than 10 pages.
This preview is of an iPhone XR.

Code snippets

Simply placing a table using Flux and having more than 10 pages will result in a lack of space.

<!-- $orders = \App\Models\Order::paginate(5) -->

<flux:table :paginate="$orders">
    <!-- ... -->
</flux:table>

How do you expect it to work?

It would be great if it somehow knew that it wouldn't fit and hid some of the page options.
Alternatively, you could send a prop to the pagination component that specifies the maximum number of page buttons to display.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@FinnPaes Have you tried 'breaking out' the pagination using flux:pagination then wrapping two versions of that in css to show/hide the desired one based on screen width?

The flux:pagination file is vendor/livewire/flux-pro/stubs/resources/views/flux/pagination.blade.php

You could make your own custom component by copying that code, then make the desired adjustments to create a simplified version for narrow screens and wrap the two in the appropriately css'd divs, e.g.:

<div class="hidden md:block">
    <flux:pagination :paginator="$paginator" />
</div>

<div class="md:hidden">
    <x-my-mobile-pagination :paginator="$paginator" />
</div>

[FinnPaes]

@jeffchown Thank you for your answer!
Overwriting the component is indeed an option, but I think it would be great if there were a "permanent fix" for this in Flux itself, as other users might also encounter this issue.

If it doesn't get fixed within Flux itself, I will overwrite it, but for now, I will wait to see how this issue gets resolved.

[jeffchown]

You're welcome, @FinnPaes !

To clarify, I'm not suggesting overwriting the flux:pagination component (I try to avoid customizing core Flux components to avoid issues when Flux updates are released), I'm suggesting creating a new custom component, based on flux:pagination and specific to smaller screens, to work in cooperation with flux:pagination - then wrapping them as shown in my code example.

I hear you re: 'permanent fix', but sometimes I prefer to create a solution(s) that best suit my specific apps' needs/visuals using the core Flux components as building blocks .