fix(web): match footer font size to legacy CaTH (#729) - #766
Conversation
govuk-frontend v6 bumped the footer from size 16 to 19 as part of the GDS rebrand, making the AI CaTH footer larger than OG CaTH. Restore size 16 (16px at all breakpoints) via the GOV.UK typography scale so the footer matches the legacy service. Closes #729 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Warning Review limit reached
Next review available in: 26 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughUpdates footer styling to restore legacy size and colour in ChangesFooter Font Size Fix
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 21bb069b-89d5-4a54-b5bc-32c98dc5c43d
📒 Files selected for processing (4)
apps/web/src/assets/css/web.scssdocs/tickets/729/checklist.mddocs/tickets/729/plan.mddocs/tickets/729/ticket.md
| - **AC1: Footer font size matches OG CaTH** — Override `.govuk-footer` to use the GOV.UK 16px responsive typography scale (`govuk-typography-responsive($size: 16)`), matching OG CaTH's 16px desktop / 14px mobile. | ||
| - Files: `apps/web/src/assets/css/web.scss` | ||
|
|
||
| - **AC2: Uses GOV.UK typography scale, not arbitrary value** — Use the `govuk-frontend` `govuk-typography-responsive` mixin (size 16) rather than a hardcoded `px` value, so it stays on the Design System scale and remains responsive. | ||
| - Files: `apps/web/src/assets/css/web.scss` |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Align the plan wording with the implemented mixin and behaviour.
The plan still describes govuk-typography-responsive with a 14px mobile step, but the implementation/checklist use govuk-font-size($size: 16). Please update this section so future readers are not misled.
Also applies to: 27-32
🎭 Playwright E2E Test Results84 tests 52 ✅ 6m 28s ⏱️ Results for commit 7d31c53. ♻️ This comment has been updated with latest results. |
Preview Deployment Successful 🚀Your preview environment is ready:
The environment will be automatically cleaned up when this PR is closed. |
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e5bd54dc-f308-4c0d-8fc2-cedcc3dfb84f
📒 Files selected for processing (1)
apps/web/src/assets/css/web.scss
| // | ||
| // The GDS rebrand also lightens the footer text/link colour. Restore the | ||
| // legacy near-black text colour (#0b0c0c) for the footer and its links. | ||
| .govuk-footer { | ||
| @include index.govuk-font-size($size: 16); | ||
| color: index.$govuk-text-colour; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Fix the Stylelint failures in this footer block.
Line 33 adds an empty // comment, and Line 38 needs a blank line after the mixin call. This currently violates the SCSS lint rules reported by static analysis.
Suggested fix
-//
// The GDS rebrand also lightens the footer text/link colour. Restore the
// legacy near-black text colour (`#0b0c0c`) for the footer and its links.
.govuk-footer {
`@include` index.govuk-font-size($size: 16);
+
color: index.$govuk-text-colour;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // | |
| // The GDS rebrand also lightens the footer text/link colour. Restore the | |
| // legacy near-black text colour (#0b0c0c) for the footer and its links. | |
| .govuk-footer { | |
| @include index.govuk-font-size($size: 16); | |
| color: index.$govuk-text-colour; | |
| // The GDS rebrand also lightens the footer text/link colour. Restore the | |
| // legacy near-black text colour (`#0b0c0c`) for the footer and its links. | |
| .govuk-footer { | |
| `@include` index.govuk-font-size($size: 16); | |
| color: index.$govuk-text-colour; |
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 33-33: Unexpected empty comment (scss/comment-no-empty)
(scss/comment-no-empty)
[error] 38-38: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
Source: Linters/SAST tools
Preview Deployment Successful 🚀Your preview environment is ready:
The environment will be automatically cleaned up when this PR is closed. |
|
Preview Deployment Successful 🚀Your preview environment is ready:
The environment will be automatically cleaned up when this PR is closed. |
10 STATUS + IMPL changes (closed issue + merged closing PR → verified): REQ-0078 (#301): implemented → verified (PR #458) REQ-0105 (#428): in_progress → verified (PR #749) REQ-0106 (#429): approved → verified (PR #761) REQ-0107 (#431): implemented → verified (PR #701) REQ-0108 (#434): approved → verified (PR #772) REQ-0109 (#436): implemented → verified (PR #727) REQ-0112 (#467): implemented → verified (PR #670) REQ-0124 (#563): approved → verified (PR #782) REQ-0135 (#569): in_progress → verified (PR #748) REQ-0137 (#729): approved → verified (PR #766) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
3 participants
Summary
.govuk-footerfrom typography size 16 to 19 during the GDS rebrand.govuk-font-size($size: 16)), not an arbitrary px value.apps/web/src/assets/css/web.scss; footer is a shared partial so the fix applies site-wide. Onlyfont-size/line-heightare set — existing copyright/licence/display rules untouched.Test plan
yarn build— SCSS compiles; compiled CSS confirms.govuk-footer{font-size:1rem;line-height:1.25}overrides the framework's 19pxyarn lint— clean (530 files, no fixes)yarn test— 164 files, 1688 passed / 3 skippedtsc --noEmitcleanCloses #729
🤖 Generated with Claude Code
Summary by CodeRabbit