The number next to the candidate's application process header is displaced

[M-Mikos]

Summary

On Canonical's candidate dashboard, the numbers in the circle next to the application step headings (in active and not completed states) are moved to the left edge of the circle.

Steps to reproduce the behavior

1. Go to 'https://canonical.com/careers/application/
   {your-candidate-page-id}'
2. Scroll down to 'Your application process'. To see an error, one of the application steps must be active.
3. See error

Expected behavior

The number inside the round process step marker should be centered.

Suggested cause

In the pseudo-element .p-process-stepped-list__title--stepper-active::before, the text-align: center; declaration, sourced from the file '_pattern_application.scss', is overwritten by the text-align: left; declaration, sourced from the file 'styles.scss'. Similar for the .p-process-stepped-list__title--stepper-not-completed::before pseudo-element.

Screenshot

Browser/device details

• Device: Laptop PC
• OS: Microsoft Windows 10
• Browser: Firefox
• Version: 133