[4.3] Mobile pagination Cassiopeia

[brianteeman]

Pull Request for Issue #32674 #37711 and many more reports

Summary of Changes

Prevent the pagination going "off-screen" on small devices

Testing Instructions

This PR is an scss change so either apply the PR and then npm run build:css or install a prebuilt package
Then create a menu item to a list of all articles in a category making sure that you have a lot of articles to force the pagination. Hint if you set the list limit to 5 you need less articles

Actual result BEFORE applying this Pull Request

The pagination forces the screen to be much wider than the device

Expected result AFTER applying this Pull Request

The navigation bar is truncated as shown in the screenshot

If accepted I will make the same change for the same problem in atum

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[brianteeman]

@hans2103 I would be grateful if you could check my scss - it works but perhaps could be improved?

[hans2103]

While testing I stumbled upon another issue... why is there a float on paragraph with className com-content-category-blog__counter?

Out of scope for this issue... but just noticing it to make an issue later. ;-)

[hans2103]

@brianteeman Testing your PR. In your example you are only going to display the first 4 and last 4 list items of the pagination. But when you are on page 3 - 8 you have no visible clue that you are. I think you should have a visible clue on what page number you are. Therefor the active page should be visible.

[richard67]

@brianteeman Could you fix the code style errors reported here https://ci.joomla.org/joomla/joomla-cms/65841/1/28 ? Thanks in advance.

[brianteeman]

Sorry this is clearly not correct