Pagination in stacked mode relies on whitespace for correct text alignment

[matteason]

Description of the issue

When in stacked (block) mode (no page numbers displayed), the pagination component relies on whitespace in the HTML to align the 'Previous' and 'Next' text with the labels below.

If there's no whitespace between the govuk-pagination__icon SVG and the govuk-pagination__link-title span, the 'Previous' or 'Next' link is displayed about 4 pixels too far to the left.

With whitespace:

Without whitespace:

(The text is actually slightly misaligned even in the first version - 'Previous' aligns with the end of the underline on the label rather than the first letter - I'm not sure if this is intentional)

Steps to reproduce the issue

Open this Design System pagination example in Firefox, right-click > Inspect the link, expand the <a> tag, click the whitespace node and press Delete

Actual vs expected behaviour

I would expect the text alignment to not rely on whitespace in the HTML. In my particular case (a Vue component library) I have no control over whether consumers of the library will have the whitespace compression option enabled or not, though by default it's enabled

There's been a previous issue with whitespace causing layout changes in the header component, and there appears to be a fix for a similar issue when pagination is used in list mode:

govuk-frontend/src/govuk/components/pagination/_index.scss

Lines 57 to 61 in eed94f8

	// Use flex to get around a whitespace issue between the arrow svg and the link text
	// without having to rely on whitespace control from backend tooling
	.govuk-pagination__link {
	display: flex;
	align-items: center;

Environment (where applicable)

• Operating system: Windows 10
• Browser: Firefox/Chrome
• Browser version: Firefox 112.0, Chrome 112.0.5615.138
• GOV.UK Frontend Version: 4.6.0

[matteason]

I'm happy to have a go at fixing this if you agree it's worth doing. I know you've just hit a code freeze for v5 so I wouldn't expect it to be merged any time soon.

[querkmachine]

@matteason Ah, the code freeze we had was for last week's 4.6.0 release. You're welcome to contribute a fix if you want!

[matteason]

Ah sorry! I misinterpreted this comment. I'll see what I can do!

[frankieroberto]

Just a ➕1 to say I spotted this bug too – working on a service which uses this component on almost every page.