Pagination component numbering issue on small screens

[jackheslop96]

Description of the issue

For smaller screen sizes the pagination numbering stops obeying the rules as defined here.

Steps to reproduce the issue

This issue can be reproduced by going to https://www.staging.tax.service.gov.uk/auth-login-stub/gg-sign-in?continue=/manage-transit-movements/draft-declarations using enrolment:

• Enrolment Key: HMRC-CTC-ORG
• Identifier Name: EORINumber
• Identifier Value: 1234567

For a smaller screen size you will see the behaviour as demonstrated in the above screenshot.

Actual vs expected behaviour

In the above screenshot I would expect to see

• 1 2 [3] 4 ... 7 for a normal screen size
• 1 ... [3] ... 7 for a smaller screen size

Environment (where applicable)

• Operating system: All
• Browser: All
• Browser version: All
• GOV.UK Frontend Version: play-frontend-hmrc 6.5.0-play-28

Additional information

See the following thread in Slack for more info: https://hmrcdigital.slack.com/archives/CJMUM9AG3/p1676914677343619

[oscarduignan]

alternative steps to reproduce:

1. have a pagination component with more than 3 pages, where the current page is the 3rd page, for example https://design-system.service.gov.uk/components/pagination/last-page/index.html
2. shrink viewport to mobile size
3. the second pagination item will be hidden, but since there are no extra items between the first pagination item and the immediate sibling before the current one, there are no ellipsis between them so it shows [1] [3] rather than the [1] ... [50] (that it would show if there was an ellipsis if current page was 50) - the pagination item immediately after the first page should probably not be hidden on a small screen (whether it's an ellipsis or normal pagination item, so it would show [1] [2] [3] instead of [1] [3])

[querkmachine]

Thank you both for bringing this to our attention.

This seems to be an oversight on our part. Our code expects the ellipsis to be present in the HTML on all breakpoints, and doesn't anticipate it only being needed on mobile views. I imagine the same will happen if the 'current' page is third-from-last, too.

[querkmachine]

We've given this some pokes, however we've come to the conclusion that we can't satisfactorily fix this issue without introducing a breaking change into the component. As such we're going to push this out until at least the v5 release.