Pagination overlaps page selector on mobile

[danharrin]

[zepfietje]

On mobile the simple pagination UI is used though:

However, the issue does occur when having a lot of pages on >= md screens. It's tricky as the styling depends on the screen breakpoint, which makes the issue occur on larger screens (while not on smaller screens) if there's an open sidebar:

To account for this, we'd have to get rid of the page selector entirely, which also isn't a good solution as it degrades the UX in more cases. Maybe we should start using container queries already: https://caniuse.com/css-container-queries.

[danharrin]

Yeah, lets go with container queries here

[mauricekindermann]

Happens on desktop with large datasets, especially when on the the back-end of the results:

And as the screen shrinks, it obscures more

One solution when doing container queries might be to have heirachy, preferring something like this when space is limited:

< [first] ... last >
< first ... [last] >
< first ... [X] ... last >

Which would shrink it down to this. No functionality is lost since the arrows always allow for next/previous. If anything it visually simplifies where you are.

[zepfietje]

https://github.com/filamentphp/filament/pull/8447#issuecomment-1721054022

[zepfietje]

@danharrin, can we even add the container queries Tailwind CSS plugin as a non-breaking change? This would require devs who manually compile their stylesheets to add the dependency, right? Or could we add it in a backward-compatible way by falling back to the current screen breakpoints (if that doesn't collide with the container breakpoints)?

[danharrin]

I'd want to fall back to the screen breakpoints anyway, otherwise it might break some old browsers

[zepfietje]

Yeah, will have to check if we can make it work with supports- maybe.

[danharrin]

Or write custom CSS without TW and bundle it with the asset system, that wouldn't be a breaking change

[valpuia]

What about this? https://laravel.com/docs/10.x/pagination#adjusting-the-pagination-link-window and provide onEachSide(1)

[zepfietje]

That would degrade the UX on large screens too.

[zepfietje]

What about this? https://laravel.com/docs/10.x/pagination#adjusting-the-pagination-link-window and provide onEachSide(1)

Just for context: this seems to be the default already, but doesn't do exactly what you think it does.