Three things reported from the live mobile view. All three verified by measurement before and after.
1. We were implying we are an official service
The value prop read "Official & trusted" — whose grammatical subject is this site. That reads as a claim that schoolcompare is an official service. It is not: it is an independent site that republishes official figures.
Now "Built on official data", which describes the data instead.
I checked every other use of the word. All nine describe the data — "official DfE figures", "the official figure isn't in" — and are accurate as they stand. That one title was the only place the site described itself.
The footer now says it outright rather than leaving it to inference:
An independent site. Not affiliated with the Department for Education or Ofsted.
It sits in the footer so it appears on every page. A new e2e test asserts both halves: that the statement is present, and that no text presents the site itself as official (scoped so it still permits "official DfE figures", which is the correct usage).
One thing worth noting: the disclaimer first measured 4.71:1 against a 4.5 floor. That is a fine margin for decorative text and the wrong one for a line whose entire job is to be legible to someone checking whether this is a government site. It is now 5.59:1 — quieter than the copy around it by size, not by contrast.
2. The artwork sat under the search on phones
The DOM keeps .heroContent first so the desktop overlay doesn't depend on source order — which left the band stranded at the bottom of the panel, reading as a strip stuck on the end rather than a hero image.
order now moves it above the copy below 860px. It is decorative and aria-hidden, so nothing about reading order changes. Measured on a 667px viewport (the shortest phone still in real use), the search button lands at 418px — comfortably inside the fold.
3. The search input was unusable on phones
"Search schools" is a fixed 134px with white-space: nowrap, so it took 48% of the row. Measured on staging:
viewport
input text space
placeholder needs
390px
102px
194px
360px
72px
194px
320px
32px
194px
At 320px you could not see what you were typing.
The button now wraps to its own full-width row below 480px. At 390px the input goes from 102px → 226px of text space, so the full placeholder fits from 360px up. The pill stays a single element, so it keeps its border, shadow and :focus-within ring, and the button gains a full-width tap target.
viewport
text space after
fits
480px
284px
✅
390px
226px
✅
360px
196px
✅
320px
156px
❌ (needs 188px)
320px is still ~30px short, and I left it. Closing it needs a shorter placeholder, which three other tests match on by exact string — not worth churning them for a width that is effectively gone from the field. Say the word if you'd rather I did.
Verification
tsc clean, 159/159 unit tests, build green, 42 e2e journeys parse. Layout and contrast measured through the offline harness at 1440 / 480 / 390 / 360 / 320 in both themes — and the harness now renders the real FilterBar markup with a real <input>, because it previously mocked the field with a <span>, which is exactly what hid this bug from me the first time.
Three things reported from the live mobile view. All three verified by measurement before and after.
## 1. We were implying we are an official service
The value prop read **"Official & trusted"** — whose grammatical subject is *this site*. That reads as a claim that schoolcompare is an official service. It is not: it is an independent site that republishes official figures.
Now **"Built on official data"**, which describes the data instead.
I checked every other use of the word. All nine describe the *data* — "official DfE figures", "the official figure isn't in" — and are accurate as they stand. That one title was the only place the site described itself.
The footer now says it outright rather than leaving it to inference:
> An independent site. Not affiliated with the Department for Education or Ofsted.
It sits in the footer so it appears on every page. A new e2e test asserts both halves: that the statement is present, and that no text presents the site itself as official (scoped so it still permits "official DfE figures", which is the correct usage).
**One thing worth noting:** the disclaimer first measured **4.71:1** against a 4.5 floor. That is a fine margin for decorative text and the wrong one for a line whose entire job is to be legible to someone checking whether this is a government site. It is now **5.59:1** — quieter than the copy around it by size, not by contrast.
## 2. The artwork sat under the search on phones
The DOM keeps `.heroContent` first so the desktop overlay doesn't depend on source order — which left the band stranded at the bottom of the panel, reading as a strip stuck on the end rather than a hero image.
`order` now moves it above the copy below 860px. It is decorative and `aria-hidden`, so nothing about reading order changes. Measured on a **667px** viewport (the shortest phone still in real use), the search button lands at **418px** — comfortably inside the fold.
## 3. The search input was unusable on phones
"Search schools" is a fixed **134px** with `white-space: nowrap`, so it took 48% of the row. Measured on staging:
| viewport | input text space | placeholder needs |
|---|---|---|
| 390px | 102px | 194px |
| 360px | 72px | 194px |
| 320px | **32px** | 194px |
At 320px you could not see what you were typing.
The button now wraps to its own full-width row below 480px. At 390px the input goes from **102px → 226px** of text space, so the full placeholder fits from 360px up. The pill stays a single element, so it keeps its border, shadow and `:focus-within` ring, and the button gains a full-width tap target.
| viewport | text space after | fits |
|---|---|---|
| 480px | 284px | ✅ |
| 390px | 226px | ✅ |
| 360px | 196px | ✅ |
| 320px | 156px | ❌ (needs 188px) |
**320px is still ~30px short**, and I left it. Closing it needs a shorter placeholder, which three other tests match on by exact string — not worth churning them for a width that is effectively gone from the field. Say the word if you'd rather I did.
## Verification
`tsc` clean, 159/159 unit tests, build green, 42 e2e journeys parse. Layout and contrast measured through the offline harness at 1440 / 480 / 390 / 360 / 320 in both themes — and the harness now renders the **real** FilterBar markup with a real `<input>`, because it previously mocked the field with a `<span>`, which is exactly what hid this bug from me the first time.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Three things, all reported from the live mobile view.
WE ARE NOT AN OFFICIAL SERVICE
The value prop read "Official & trusted", whose grammatical subject is this
site — it reads as a claim that schoolcompare is an official service. It is
not; it is an independent site that republishes official figures. Now "Built
on official data", which describes the data instead.
Checked every other use of the word: all nine describe the data ("official DfE
figures", "the official figure isn't in") and are correct as they stand. That
one title was the only place the site described itself.
The footer now says it outright — "An independent site. Not affiliated with
the Department for Education or Ofsted." — so it appears on every page rather
than being left to inference. An e2e test asserts both halves: that the
statement is present, and that no text presents the site itself as official.
The disclaimer first measured 4.71:1 against a 4.5 floor. That is a fine
margin for decoration and the wrong one for a line whose job is to be legible
to someone checking whether this is a government site; it is now 5.59:1,
quieter than the copy around it by size rather than by contrast.
THE ARTWORK SAT UNDER THE SEARCH ON PHONES
The DOM keeps .heroContent first so the desktop overlay does not depend on
source order, which left the band stranded at the bottom of the panel, reading
as a strip stuck on the end rather than a hero image. `order` moves it above
the copy on phones; it is decorative and aria-hidden, so no reading order
changes. Measured on a 667px viewport — the shortest phone still in use — the
search button lands at 418px, comfortably inside the fold.
THE SEARCH INPUT WAS UNUSABLE ON PHONES
"Search schools" is a fixed 134px with white-space: nowrap, so it took 48% of
the row. Measured on staging:
390px input text space 102px placeholder needs 194px
360px 72px
320px 32px
At 320px you could not see what you were typing. The button now wraps to its
own full-width row below 480px, which fixes 360px and up — 390px goes from
102px to 226px of text space. The pill stays a single element, so it keeps its
border, shadow and :focus-within ring, and the button gains a full-width tap
target.
320px is still ~30px short. Closing it needs a shorter placeholder, which three
other tests match on by exact string; left alone deliberately rather than
churn them for a width that is effectively gone.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This PR is a frontend-only change adding an explicit independence disclaimer to the footer (removing an ambiguous 'Official & trusted' value-prop title), plus mobile CSS fixes for the hero search bar wrapping and hero artwork stacking order on narrow viewports, backed by a new e2e test. The change is low-risk, self-consistent, and well-verified (contrast tokens exist and are used correctly, DOM structure supports the new flex/order CSS, the new e2e test's selectors and regexes match the new markup).
🟡 Minor
nextjs-app/components/HomeView.module.css: The comment at line 316 still refers to the value-prop title as "Official & trusted", but this PR renames that title to "Built on official data" in HomeView.tsx. The comment is now stale and should be updated to match.
## 🤖 AI Code Review (Claude Code)
This PR is a frontend-only change adding an explicit independence disclaimer to the footer (removing an ambiguous 'Official & trusted' value-prop title), plus mobile CSS fixes for the hero search bar wrapping and hero artwork stacking order on narrow viewports, backed by a new e2e test. The change is low-risk, self-consistent, and well-verified (contrast tokens exist and are used correctly, DOM structure supports the new flex/order CSS, the new e2e test's selectors and regexes match the new markup).
### 🟡 Minor
- **nextjs-app/components/HomeView.module.css**: The comment at line 316 still refers to the value-prop title as "Official & trusted", but this PR renames that title to "Built on official data" in HomeView.tsx. The comment is now stale and should be updated to match.
tudor
merged commit 153b26a32f into main2026-08-14 22:28:33 +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.
Three things reported from the live mobile view. All three verified by measurement before and after.
1. We were implying we are an official service
The value prop read "Official & trusted" — whose grammatical subject is this site. That reads as a claim that schoolcompare is an official service. It is not: it is an independent site that republishes official figures.
Now "Built on official data", which describes the data instead.
I checked every other use of the word. All nine describe the data — "official DfE figures", "the official figure isn't in" — and are accurate as they stand. That one title was the only place the site described itself.
The footer now says it outright rather than leaving it to inference:
It sits in the footer so it appears on every page. A new e2e test asserts both halves: that the statement is present, and that no text presents the site itself as official (scoped so it still permits "official DfE figures", which is the correct usage).
One thing worth noting: the disclaimer first measured 4.71:1 against a 4.5 floor. That is a fine margin for decorative text and the wrong one for a line whose entire job is to be legible to someone checking whether this is a government site. It is now 5.59:1 — quieter than the copy around it by size, not by contrast.
2. The artwork sat under the search on phones
The DOM keeps
.heroContentfirst so the desktop overlay doesn't depend on source order — which left the band stranded at the bottom of the panel, reading as a strip stuck on the end rather than a hero image.ordernow moves it above the copy below 860px. It is decorative andaria-hidden, so nothing about reading order changes. Measured on a 667px viewport (the shortest phone still in real use), the search button lands at 418px — comfortably inside the fold.3. The search input was unusable on phones
"Search schools" is a fixed 134px with
white-space: nowrap, so it took 48% of the row. Measured on staging:At 320px you could not see what you were typing.
The button now wraps to its own full-width row below 480px. At 390px the input goes from 102px → 226px of text space, so the full placeholder fits from 360px up. The pill stays a single element, so it keeps its border, shadow and
:focus-withinring, and the button gains a full-width tap target.320px is still ~30px short, and I left it. Closing it needs a shorter placeholder, which three other tests match on by exact string — not worth churning them for a width that is effectively gone from the field. Say the word if you'd rather I did.
Verification
tscclean, 159/159 unit tests, build green, 42 e2e journeys parse. Layout and contrast measured through the offline harness at 1440 / 480 / 390 / 360 / 320 in both themes — and the harness now renders the real FilterBar markup with a real<input>, because it previously mocked the field with a<span>, which is exactly what hid this bug from me the first time.🤖 Generated with Claude Code
Three things, all reported from the live mobile view. WE ARE NOT AN OFFICIAL SERVICE The value prop read "Official & trusted", whose grammatical subject is this site — it reads as a claim that schoolcompare is an official service. It is not; it is an independent site that republishes official figures. Now "Built on official data", which describes the data instead. Checked every other use of the word: all nine describe the data ("official DfE figures", "the official figure isn't in") and are correct as they stand. That one title was the only place the site described itself. The footer now says it outright — "An independent site. Not affiliated with the Department for Education or Ofsted." — so it appears on every page rather than being left to inference. An e2e test asserts both halves: that the statement is present, and that no text presents the site itself as official. The disclaimer first measured 4.71:1 against a 4.5 floor. That is a fine margin for decoration and the wrong one for a line whose job is to be legible to someone checking whether this is a government site; it is now 5.59:1, quieter than the copy around it by size rather than by contrast. THE ARTWORK SAT UNDER THE SEARCH ON PHONES The DOM keeps .heroContent first so the desktop overlay does not depend on source order, which left the band stranded at the bottom of the panel, reading as a strip stuck on the end rather than a hero image. `order` moves it above the copy on phones; it is decorative and aria-hidden, so no reading order changes. Measured on a 667px viewport — the shortest phone still in use — the search button lands at 418px, comfortably inside the fold. THE SEARCH INPUT WAS UNUSABLE ON PHONES "Search schools" is a fixed 134px with white-space: nowrap, so it took 48% of the row. Measured on staging: 390px input text space 102px placeholder needs 194px 360px 72px 320px 32px At 320px you could not see what you were typing. The button now wraps to its own full-width row below 480px, which fixes 360px and up — 390px goes from 102px to 226px of text space. The pill stays a single element, so it keeps its border, shadow and :focus-within ring, and the button gains a full-width tap target. 320px is still ~30px short. Closing it needs a shorter placeholder, which three other tests match on by exact string; left alone deliberately rather than churn them for a width that is effectively gone. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>🤖 AI Code Review (Claude Code)
This PR is a frontend-only change adding an explicit independence disclaimer to the footer (removing an ambiguous 'Official & trusted' value-prop title), plus mobile CSS fixes for the hero search bar wrapping and hero artwork stacking order on narrow viewports, backed by a new e2e test. The change is low-risk, self-consistent, and well-verified (contrast tokens exist and are used correctly, DOM structure supports the new flex/order CSS, the new e2e test's selectors and regexes match the new markup).
🟡 Minor