Pagination Results Aligning Left

[max-holland]

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem
  • Followed all applicable steps in the debugging guide
  • Checked the FAQs on the message board for common solutions
  • Checked that your issue doesn't exist: https://github.com/ministryofjustice/moj-frontend/issues
  • Checked that there is not already a package that provides the described functionality

Description

We have integrated the pagination component into our application. We are currently running an Angular application on version 18.

However, we’ve encountered an issue where the pagination results text aligns to the left instead of to the right, which is inconsistent with the example provided in the official documentation: Pagination Design Example.

We have followed the HTML structure within the example: https://github.com/hmcts/opal-frontend/blob/681ddfba6862c12212f840bcbd95ef4fe9e6ded9/src/app/components/moj/moj-pagination/moj-pagination.component.html#L1C27-L1C52

Inspecting the DOM the CSS applied looks to be matching what is in the example. The only thing we can see is that it looks like in the selector moj-pagination:after the rule display: inline-block; does not look like it's being picked up.

As a temporary solution we have applied the following: https://github.com/hmcts/opal-frontend/blob/681ddfba6862c12212f840bcbd95ef4fe9e6ded9/src/app/components/moj/moj-pagination/moj-pagination.component.scss#L1

We have created a re-usable Angular component to wrap the pagination component, but we also get the issue when we put the HTML directly into a page.

Expected behaviour: [What you expect to happen]
Pagination Design Example

Actual behaviour:

Versions

@ministryofjustice/frontend: 3.3.0
govuk-frontend: 5.7.1