fix(compare): anchor grade-5 & EBacc rows; restore secondary-button outline
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m4s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 11s
PR Checks / Build Frontend (no push) (pull_request) Successful in 48s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 8s

SF1 (expert sign-off): the secondary academics 'Grade 5+ in English &
maths' and 'EBacc entry' rows rendered as bare numbers — the one place
the 'every number anchored against the England average' promise broke.
Both now show the official England anchor (already in the payload) + an
Above/Close/Below verdict chip, matching Attainment 8 (which also gains a
chip for consistency).

Button affordance: globals.css has a duplicate .btn block whose
'border: none' overrode the base '1px solid transparent', so
.btn-secondary/.btn-active's 'border-color' had no width — every outline
button (the modal's '+ Compare', search-result '+ Compare', 'Comparing')
rendered as borderless teal text. Give the outline variants the full
'border' shorthand so the outline renders regardless of the clobbered base.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
This commit is contained in:
Tudor
2026-07-18 08:26:59 +01:00
co-authored by Claude Fable 5
parent a1128bd801
commit b0c5b6bb57
3 changed files with 116 additions and 6 deletions
+8 -3
View File
@@ -183,10 +183,15 @@ body {
}
/* Secondary: teal outline — supporting actions (+ Compare) */
/* NOTE: a duplicate `.btn` block further down this file sets `border: none`,
which wins over the base `.btn`'s `1px solid transparent`. The outline
variants below therefore declare the full `border` shorthand explicitly so
they don't depend on the base border-width — otherwise `border-color` alone
has no width and the outline never renders (buttons read as plain text). */
.btn-secondary {
background: transparent;
color: var(--accent-teal);
border-color: var(--accent-teal);
border: 1px solid var(--accent-teal);
}
.btn-secondary:hover:not(:disabled) {
background: var(--accent-teal-bg);
@@ -196,7 +201,7 @@ body {
.btn-tertiary {
background: var(--bg-secondary);
color: var(--text-secondary);
border-color: var(--border-color);
border: 1px solid var(--border-color);
}
.btn-tertiary:hover:not(:disabled) {
background: var(--border-color);
@@ -207,7 +212,7 @@ body {
.btn-active {
background: var(--accent-teal-bg);
color: var(--accent-teal);
border-color: var(--accent-teal);
border: 1px solid var(--accent-teal);
}
.btn-active:hover:not(:disabled) {
background: transparent;