Fixes the sticky school bar being hidden behind the site header when scrolling, so you couldn't see which schools were selected.
Cause
The Navigation header is position: sticky; top: 0 (z-index 1000). The compare school bar was also sticky; top: 0 (z-index 10) — so when scrolled it pinned at the same top: 0behind the header. Measured on mobile staging: the 57px header covered 57 of the bar's 72px, leaving a ~15px sliver.
Fix
Offset the bar's sticky top to the header height — 65px desktop, 57px mobile (Navigation's responsive breakpoint is 640px, matching the bar's) — so it pins just below the header, fully visible. Verified live on staging by patching the offset: the bar pins at top = header bottom, fully shown.
Regression guard
The mobile compare e2e now asserts the bar's sticky top is at least the header height. Confirmed it fails against the current (buggy) build (received 0, expected ≥56) and will pass once this deploys.
Fixes the sticky school bar being hidden behind the site header when scrolling, so you couldn't see which schools were selected.
## Cause
The `Navigation` header is `position: sticky; top: 0` (z-index 1000). The compare school bar was also `sticky; top: 0` (z-index 10) — so when scrolled it pinned at the same `top: 0` **behind** the header. Measured on mobile staging: the 57px header covered 57 of the bar's 72px, leaving a ~15px sliver.
## Fix
Offset the bar's sticky `top` to the header height — **65px desktop, 57px mobile** (Navigation's responsive breakpoint is 640px, matching the bar's) — so it pins just below the header, fully visible. Verified live on staging by patching the offset: the bar pins at `top = header bottom`, fully shown.
## Regression guard
The mobile compare e2e now asserts the bar's sticky `top` is at least the header height. Confirmed it **fails against the current (buggy) build** (received 0, expected ≥56) and will pass once this deploys.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
The Navigation header is position:sticky top:0 (z-index 1000). The school
bar was also sticky top:0 (z-index 10), so when scrolled it pinned at the
same top:0 *behind* the header — on mobile 57 of its 72px were covered,
leaving only a sliver, so you couldn't see which schools were selected.
Offset the bar's sticky top to the header height (65px desktop, 57px
mobile — the Navigation breakpoint is also 640px) so it pins just below.
e2e guard asserts the bar's sticky offset is at least the header height
(verified it fails against the pre-fix build).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
This diff adds a Playwright regression test and CSS fix so the sticky school-comparison bar pins below the sticky site header (top: 65px desktop / 57px mobile) instead of sliding underneath it. The values are verified to match Navigation's actual rendered header height (64px container + 1px border = 65px; 56px + 1px = 57px on mobile), and the test's [class*="header"]/[class*="schoolBar"] selectors resolve unambiguously to the intended elements given the current DOM/layout order. This is a low-risk, well-tested UI fix with no backend, security, or deploy impact.
🟡 Minor
nextjs-app/components/ComparisonView.module.css: The 65px/57px sticky offsets are magic numbers manually kept in sync with Navigation's rendered header height rather than derived from a shared CSS variable or measured at runtime; if the header height changes again in the future (e.g. logo/nav padding tweaks), this bar will silently regress to the same hidden-behind-header bug being fixed here.
## 🤖 AI Code Review (Claude Code)
This diff adds a Playwright regression test and CSS fix so the sticky school-comparison bar pins below the sticky site header (top: 65px desktop / 57px mobile) instead of sliding underneath it. The values are verified to match Navigation's actual rendered header height (64px container + 1px border = 65px; 56px + 1px = 57px on mobile), and the test's `[class*="header"]`/`[class*="schoolBar"]` selectors resolve unambiguously to the intended elements given the current DOM/layout order. This is a low-risk, well-tested UI fix with no backend, security, or deploy impact.
### 🟡 Minor
- **nextjs-app/components/ComparisonView.module.css**: The 65px/57px sticky offsets are magic numbers manually kept in sync with Navigation's rendered header height rather than derived from a shared CSS variable or measured at runtime; if the header height changes again in the future (e.g. logo/nav padding tweaks), this bar will silently regress to the same hidden-behind-header bug being fixed here.
tudor
merged commit e39aef2935 into main2026-07-15 12:02:30 +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.
Fixes the sticky school bar being hidden behind the site header when scrolling, so you couldn't see which schools were selected.
Cause
The
Navigationheader isposition: sticky; top: 0(z-index 1000). The compare school bar was alsosticky; top: 0(z-index 10) — so when scrolled it pinned at the sametop: 0behind the header. Measured on mobile staging: the 57px header covered 57 of the bar's 72px, leaving a ~15px sliver.Fix
Offset the bar's sticky
topto the header height — 65px desktop, 57px mobile (Navigation's responsive breakpoint is 640px, matching the bar's) — so it pins just below the header, fully visible. Verified live on staging by patching the offset: the bar pins attop = header bottom, fully shown.Regression guard
The mobile compare e2e now asserts the bar's sticky
topis at least the header height. Confirmed it fails against the current (buggy) build (received 0, expected ≥56) and will pass once this deploys.🤖 Generated with Claude Code
https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
🤖 AI Code Review (Claude Code)
This diff adds a Playwright regression test and CSS fix so the sticky school-comparison bar pins below the sticky site header (top: 65px desktop / 57px mobile) instead of sliding underneath it. The values are verified to match Navigation's actual rendered header height (64px container + 1px border = 65px; 56px + 1px = 57px on mobile), and the test's
[class*="header"]/[class*="schoolBar"]selectors resolve unambiguously to the intended elements given the current DOM/layout order. This is a low-risk, well-tested UI fix with no backend, security, or deploy impact.🟡 Minor