The View button on the map's school card was drawn in Leaflet's link blue (#0078A8) instead of the quiet grey the list rows use.
Cause: leaflet.css styles .leaflet-container a { color: #0078A8 } at specificity 0,1,1, which beats .btn-tertiary at 0,1,0. The card's View is an <a class="btn btn-tertiary">, so it lost in both light and dark themes.
Fix:html .leaflet-container a.btn-tertiary { color: var(--text-secondary) }, added in globals.css beside the other Leaflet overrides. The hover rule (0,3,0) still wins over it.
Verification
I injected the rule on staging with Playwright in dark mode. The popup's View went from rgb(0,120,168) to rgb(180,194,199), the same as the list's View.
The E2E journey "a desktop postcode search opens on the map with the list beside it" now checks that the popup's View colour matches the list's (polled, because .btn animates its colour). Against current staging it fails as expected (list rgb(74,85,96), popup rgb(0,120,168)).
The View button on the map's school card was drawn in Leaflet's link blue (`#0078A8`) instead of the quiet grey the list rows use.
**Cause:** leaflet.css styles `.leaflet-container a { color: #0078A8 }` at specificity 0,1,1, which beats `.btn-tertiary` at 0,1,0. The card's View is an `<a class="btn btn-tertiary">`, so it lost in both light and dark themes.
**Fix:** `html .leaflet-container a.btn-tertiary { color: var(--text-secondary) }`, added in globals.css beside the other Leaflet overrides. The hover rule (0,3,0) still wins over it.
**Verification**
- I injected the rule on staging with Playwright in dark mode. The popup's View went from `rgb(0,120,168)` to `rgb(180,194,199)`, the same as the list's View.
- The E2E journey "a desktop postcode search opens on the map with the list beside it" now checks that the popup's View colour matches the list's (polled, because `.btn` animates its colour). Against current staging it fails as expected (list `rgb(74,85,96)`, popup `rgb(0,120,168)`).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
leaflet.css colours every link in the map `.leaflet-container a`
(#0078A8, specificity 0,1,1), which beat .btn-tertiary (0,1,0), so the
card's View button came out in Leaflet's link blue in both themes. Pull
it back onto --text-secondary next to the other Leaflet overrides.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Adds a CSS rule so the map popup card's View button (.btn-tertiary) uses the design-system secondary text colour instead of Leaflet's default link blue, plus an e2e assertion that the popup's View colour matches the list's. The change is small, scoped to the Leaflet container, and looks healthy.
🟡 Minor
nextjs-app/app/(frontend)/globals.css: The new rule html .leaflet-container a.btn-tertiary has specificity (0,2,2). The comment's claims about the hover rule (0,3,0) are only accurate if that rule really beats it, and the comment doesn't mention the :focus/:visited/:active states. If those states are styled at lower specificity they will now be overridden by this rule. This is worth a quick check but is unlikely to break anything.
e2e/tests/journeys.spec.ts: The test compares computed colours of the list's View link and the popup's View link. It would still pass if both were wrong in the same way (e.g. both Leaflet blue). It also assumes the list View link is not hovered or focused at that moment, since the card was just clicked and the mouse is over it. A hover colour on the list link could therefore make the comparison flaky. Consider asserting against the expected token value or moving the mouse away first.
## 🤖 AI Code Review (Claude Code)
Adds a CSS rule so the map popup card's View button (.btn-tertiary) uses the design-system secondary text colour instead of Leaflet's default link blue, plus an e2e assertion that the popup's View colour matches the list's. The change is small, scoped to the Leaflet container, and looks healthy.
### 🟡 Minor
- **nextjs-app/app/(frontend)/globals.css**: The new rule `html .leaflet-container a.btn-tertiary` has specificity (0,2,2). The comment's claims about the hover rule (0,3,0) are only accurate if that rule really beats it, and the comment doesn't mention the :focus/:visited/:active states. If those states are styled at lower specificity they will now be overridden by this rule. This is worth a quick check but is unlikely to break anything.
- **e2e/tests/journeys.spec.ts**: The test compares computed colours of the list's View link and the popup's View link. It would still pass if both were wrong in the same way (e.g. both Leaflet blue). It also assumes the list View link is not hovered or focused at that moment, since the card was just clicked and the mouse is over it. A hover colour on the list link could therefore make the comparison flaky. Consider asserting against the expected token value or moving the mouse away first.
tudor
merged commit 29b5f85952 into main2026-10-01 20:17:28 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
The View button on the map's school card was drawn in Leaflet's link blue (
#0078A8) instead of the quiet grey the list rows use.Cause: leaflet.css styles
.leaflet-container a { color: #0078A8 }at specificity 0,1,1, which beats.btn-tertiaryat 0,1,0. The card's View is an<a class="btn btn-tertiary">, so it lost in both light and dark themes.Fix:
html .leaflet-container a.btn-tertiary { color: var(--text-secondary) }, added in globals.css beside the other Leaflet overrides. The hover rule (0,3,0) still wins over it.Verification
rgb(0,120,168)torgb(180,194,199), the same as the list's View..btnanimates its colour). Against current staging it fails as expected (listrgb(74,85,96), popuprgb(0,120,168)).🤖 Generated with Claude Code
🤖 AI Code Review (Claude Code)
Adds a CSS rule so the map popup card's View button (.btn-tertiary) uses the design-system secondary text colour instead of Leaflet's default link blue, plus an e2e assertion that the popup's View colour matches the list's. The change is small, scoped to the Leaflet container, and looks healthy.
🟡 Minor
html .leaflet-container a.btn-tertiaryhas specificity (0,2,2). The comment's claims about the hover rule (0,3,0) are only accurate if that rule really beats it, and the comment doesn't mention the :focus/:visited/:active states. If those states are styled at lower specificity they will now be overridden by this rule. This is worth a quick check but is unlikely to break anything.