Remove hardcoded media query breakpoints from the JavaScript for the header and tabs components

[36degrees]

What

We have hardcoded the default desktop and tablet breakpoints into the JavaScript for both the header and tabs components:

govuk-frontend/packages/govuk-frontend/src/govuk/components/header/header.mjs

Lines 57 to 58 in a4ae219

	// Set the matchMedia to the govuk-frontend desktop breakpoint
	this.mql = window.matchMedia('(min-width: 48.0625em)')

govuk-frontend/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs

Lines 63 to 64 in a4ae219

	/** @deprecated Will be made private in v5.0 */
	this.mql = window.matchMedia('(min-width: 40.0625em)')

Find another way to link the JavaScript behaviour to the styles applied at different breakpoints without needing to hardcode them.

Why

Having the breakpoints hardcoded is likely cause issues if users override the default breakpoints.

There's also a risk that they may get out of sync if we ever make changes to the default breakpoints.

Further details

Once we've switched to loading our JavaScript using script type="module"¹ we might be able to expose the breakpoint as a CSS variable in the CSS for each component (or on the document root) and read it out using window.getComputedStyle().getPropertyValue.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• Hardcoded desktop breakpoint removed from the JavaScript for the header component
• Hardcoded tablet breakpoint removed from the JavaScript for the header component

Footnotes

1. because all browsers that support script type="module" also support CSS variables ↩