Apply global GOV.UK mobile system styles

[kevinrapley]

Summary

Applies global GOV.UK Design System aligned mobile refinements through existing shared stylesheets.

This supersedes PR #260 and avoids separate mobile-only stylesheets or account-page scoped styling.

Changes

• update shared page chrome mobile styles
• update shared header brand mobile alignment
• update shared mobile typography scale
• add a GOV.UK operating-model rule that forbids CSS priority override flags in ResearchOps stylesheets
• add regression coverage for global mobile stylesheet ownership and the absence of priority override flags in the touched GOV.UK mobile stylesheets
• add trace files for the GOV.UK specialist, interaction designer and graphic designer consultation
• address and resolve the Codex P1 review thread for mobile vertical chrome margins

GOV.UK Design System alignment

• Uses existing GOV.UK-aligned stylesheet ownership.
• Uses media queries inside shared stylesheets rather than a separate mobile CSS file.
• Keeps the service navigation menu button link-like rather than boxed.
• Preserves GOV.UK focus treatment.
• Keeps mobile page chrome edge-to-edge and content inside GOV.UK width containers.
• Keeps the GOV.UK logo visible and unclipped.

Codex review handling

The Codex P1 comment was legitimate. The mobile override now resets the full header and service-navigation margins with margin: 0, and the footer uses margin: 48px 0 0, so desktop negative top and bottom margins no longer clip the mobile page chrome.

The review thread has been replied to and resolved.

Trace

• docs/agent-audit/reasoning/2026/05/20/govuk-mobile-system-styles.md
• docs/agent-audit/reasoning/2026/05/20/govuk-mobile-system-styles.json

Validation

CI passed on 774973733171b0cc7428af582ecd1ec2a82253c8.

Changed-file verification

Changed files: 7

• .agent-operating-model/bundles/govuk-design-system/references/govuk-design-system-reference.xml
• public/css/govuk/govuk-page-chrome.css
• public/css/govuk/govuk-header-service-brand.css
• public/css/govuk/govuk-typography.css
• tests/govuk-mobile-page-chrome-route-state.test.js
• docs/agent-audit/reasoning/2026/05/20/govuk-mobile-system-styles.md
• docs/agent-audit/reasoning/2026/05/20/govuk-mobile-system-styles.json

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e834aeb40d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[cloudflare-workers-and-pages]

Deploying researchops with    Cloudflare Pages

Latest commit:	7749737
Status:	✅  Deploy successful!
Preview URL:	https://7af7760a.researchops.pages.dev
Branch Preview URL:	https://fix-govuk-mobile-system-styl.researchops.pages.dev

View logs

[kevinrapley]

Converted to draft and retained as evidence.

Decision: this PR showed that continuing to patch the hand-built GOV.UK imitation layer is brittle. The next piece of work will move to a proper GOV.UK Frontend integration spike using the official package, Sass pipeline and eventually Nunjucks/macros where appropriate.

Do not merge this PR as a production styling fix unless it is deliberately revived after the official integration path has been assessed.