fix(search): the mobile hero search was indented by a card's padding #130

Merged

tudor merged 2 commits from fix/mobile-hero-search into main 2026-08-26 20:51:21 +00:00

Conversation 1 Commits 2 Files Changed 2

+127 -1

2 Commits

Author	SHA1	Message	Date
TudorandClaude Opus 5	0804566736	fix(test): drop a committed scratch probe, and close a hole in the guard ... Code review, all three findings valid. e2e/tests/__m.spec.ts was a throwaway probe used to measure the mobile hero geometry. It asserts nothing, so it could never fail; it carried a leftover `pick('form').constructor === Object ? null : null` that is null either way and throws if no form matches; and it should never have been committed. Deleted. It survived because `rm -f e2e/tests/__m.spec.ts` ran with the shell already inside e2e/, so the path resolved to e2e/e2e/tests/... — which does not exist, and rm -f is silent about that. `git add -A` then swept it in. I checked `git diff --stat` before committing, which lists only tracked modifications and never shows an untracked file; `git status --short` would have. The scoping guard compared the last line of a rule's prelude against the literal '.filterBar', so a regression written as a selector list — `.filterBar, .other { padding }`, or the same split across two lines — would have walked straight past the test meant to catch it. Selectors are now split on commas and matched individually, and comments are stripped first so a brace inside one cannot desynchronise the parse. Verified against all three shapes: bare, inline comma list, and multi-line comma list. Each is caught; each passes again once reverted. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015mWQnpye9F299NVRCCSRvj	2026-08-26 21:49:48 +01:00
TudorandClaude Opus 5	0b15497c09	fix(search): the mobile hero search was indented by a card's padding ... Measured at 390px: the headline and lede sit at x=34, while the search box, the hint and the location link all sat at x=48 and the field was 28px narrower than the copy above it. The 14px came from `@media (max-width: 768px) { .filterBar { padding: 0.875rem } }`. That rule is for the results filter bar, which is a card — background, border, shadow — and needs inner padding. The hero search is not a card: .heroMode strips all of it, padding included. Both selectors are specificity (0,1,0), so source order decides, and .heroMode only wins because it is declared right after .filterBar. A bare .filterBar rule inside a media query comes later and silently wins instead. The two rules directly below this one in the same block were already written as `.filterBar:not(.heroMode)`; this one was missed. Scoping it aligns the search box, hint and location link to the same left edge as the headline and gives the field back its 28px. The location link also carried its own 6px of button padding, so its label started further right than the hint even once the boxes agreed. Pulled back with a negative margin, which keeps the tap target. The guard is a stylesheet test: the failure is a plausible-looking layout rather than a broken one, so nothing short of measuring or looking would catch it. Verified by reverting: it names ".filterBar sets padding". Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015mWQnpye9F299NVRCCSRvj	2026-08-26 21:32:41 +01:00