I want to contribute to this.

It also happens in Atum template (Joomla4 backend).

I'm also waiting for a fix for the mobile...
Better reduce to 6 max element to show, or customizable element number by backend.
I hope it will solved as soon as possible: it's strange that this issue is still present.

Here a fix for fontend J4 by pagination override.

1. make an override of joomla/pagination layout
2. edit YOUR-TEMPLATE/html/layouts/joomla/pagination/list.php
3. after <?php echo $list['previous']['data']; ?> add this code:

<?php
$maxPages = 5;

$list["pages"] = array_values($list["pages"]);
while (count($list["pages"]) > $maxPages) {
    foreach ($list["pages"] as $key => $val) {
        if (!$val["active"]) {
            break;
        }
    }
    if ($key > $maxPages / 2) {
        array_shift($list["pages"]);
    } else {
        array_pop($list["pages"]);
    }
}
?>

4. change maxPages value to set the max number of page displayed by pagination

@richard67 can you change the flag to backend template as its not a frontend screen?

@coolcat-creations The issue was reported for the frontend according to its description, that's why it was added by @chmst . A later comment said it also affects backend. Will remove the label for now.

Ah thank you, just submitted a PR for Frontend so if that will be hopefully merged it will only be a backend issue

Please test #37711 for the frontend. Thanks in advance.

As the comment above #32674 (comment) says, there is also an issue in backend, so I leave this here open.

Nice hack, but I've expected also some ellipsis inside.
Could be extended to adjust the length according to the viewport?

No, it's simple PHP and it cannot detect viewport size.

The solution may be best handled with JavaScript so the viewport can be taken into consideration?

Yes, javascript can help to make it responsive/adaptive by viewport.

it does not need javascript. it can be done with pure css.

Two examples

https://codepen.io/brianteeman/pen/ExLapJV

https://codepen.io/brianteeman/pen/dyePjrN

But the first is probably the best

Maybe this is something that @crystalenka can look at with the JXT

@brianteeman first is the best. Should go directly into the Joomla code.

Until the changes get implemented, as I didn't really know where to add the code and the css, I made a slider for the navigation. In the blog.php I've included <div style="overflow-x:auto;"> before the navigation, and it solved the mobile-friendliness for me.

Is there any update on this? This bug was reported nearly 2 years ago and it impacts the mobile friendliness out-of-the-box...

Use my fix: #32674 (comment)

Closing as having a pull request. Please test #40620 . Thanks in advance.

Reopening as the PR has been closed.

I think we are looking for something like the video below. It is done by a template override on joomla.pagination.list.
I will try to find out how this can be pushed back into the project on a proper way.

Good, better have arrows in the extreme left and right side to improve UI usage: it is easier and faster to identify and click to move to the next page.

My example was not about the arrows. My example is about hiding elements when there is space to place them and prevent the pagination go out of bounds.

Arrows, chevrons and/or text for the outer pagination links it out of scope for the issue.

Of course @hans2103, i know this issue well, i fixed it temporarily with an override to reduce the page numbers by PHP with #32674 (comment)

Work in progress https://github.com/hans2103/joomla-cms/tree/feature/5.0-dev/responsive-pagination

I am adding a page-item-offset-[#] className to the list items of the pagination (except the list items containing className .start, .prev, .active, .next, .last)
The page items are initially hidden with display none and will be shown after certain breakpoints.

The ... have not been added yet.

feel free to attribute hans2103@c2da14c

I am adding a page-item-offset-[#] className to the list items of the pagination (except the list items containing className .start, .prev, .active, .next, .last) The page items are initially hidden with display none and will be shown after certain breakpoints.

No need to add anything. Surely this is the ideal usecase for the css nth-of-type etc

Something as simple as this scss should do it.

.page-item {
  @media (max-width: 767.98px) {
    display: none;

    &:nth-of-type(4) {
      position: relative;
      padding-right: 50px;

      &::after {
        content: '\2026';
        position: absolute;
        font-size: 24px;
        top: 0;
        left: 45px;
      }
    }

    &:nth-child(-n+4),
    &:nth-last-child(-n+4) {
      display: block;
    }

    &:nth-last-child(-n+4) {
    	&::after {
    		content: none;
    	}
    }
  }
}

Which will produce

Just add it to
build\media_source\templates\site\cassiopeia\scss\vendor\bootstrap_pagination.scss
build\media_source\templates\administrator\atum\scss\vendor\bootstrap_pagination.scss

@brianteeman please do not use px but rem instead.
People might change the default font-size of their browser or other tools and your suggestion does not follow this change.

It's not a pr just an example for those better than me to follow as a start. It's the same I posted as a codepen last year

@richard67 can you change the flag to backend template as its not a frontend screen?

For backend template you make override \administrator\templates\YOUT_BACKEND_TEMPLATE\html\layouts\joomla\pagination\links.php and
before <?php foreach ($pages['pages'] as $k => $page) : ?> you add:

<?php
$maxPages = 5;

$pages["pages"] = array_values($pages["pages"]);
while (count($pages["pages"]) > $maxPages) {
    foreach ($pages["pages"] as $key => $val) {
        if (!$val["active"]) {
            break;
        }
    }
    if ($key > $maxPages / 2) {
        array_shift($pages["pages"]);
    } else {
        array_pop($pages["pages"]);
    }
}
?>