Follow-up to #127, which merged while this was still being worked on.
The bug
.heroPanel had overflow: hidden to clip its artwork and gradient scrim to the rounded corners. It clipped the suggestion dropdown too. Measured on staging with the flag on:
178px of 320 cut off — about half the options, with nothing on screen to indicate anything was missing.
The fix
The two things that actually needed clipping now round themselves: .heroArt takes border-radius: inherit plus its own overflow, and the ::before scrim inherits the radius. The panel stops clipping its children.
Below 860px the artwork is a band flush with the top of the panel rather than a layer covering it, so there it takes the top two corners only — inheriting all four would leave it floating with rounded corners against the copy below.
Checked before removing the clip: .valueProps beneath the hero is entirely static, so a positioned dropdown paints above it without a z-index fight.
The test
Asserts the last option is the element actually painted at its own coordinates.
toBeVisible() would not have caught this — it checks for a non-empty box and visibility, and an ancestor's overflow clips neither. elementFromPoint catches clipping and occlusion alike.
Honest gap: I could not watch this test fail against a real unfixed build. Staging still has the old CSS, but the school_autosuggest flag went off there mid-verification (see below) and the test correctly skipped. It is reasoned-correct, not yet demonstrated-correct — worth re-running once the flag is back on.
Unrelated, but visible from here
Both school_autosuggest and admission_distance are currently evaluating false on staging, while the unflagged /api/suggest still returns 8 results — so Typesense is healthy and this is the flag layer failing closed. Consistent with the Unleash connection error still being unresolved.
Follow-up to #127, which merged while this was still being worked on.
## The bug
`.heroPanel` had `overflow: hidden` to clip its artwork and gradient scrim to the rounded corners. It clipped the suggestion dropdown too. Measured on staging with the flag on:
```
dropdown: top 482 -> bottom 802 (320px, 8 options)
.heroPanel: bottom 624 overflow: hidden
```
**178px of 320 cut off** — about half the options, with nothing on screen to indicate anything was missing.
## The fix
The two things that actually needed clipping now round themselves: `.heroArt` takes `border-radius: inherit` plus its own `overflow`, and the `::before` scrim inherits the radius. The panel stops clipping its children.
Below 860px the artwork is a band flush with the top of the panel rather than a layer covering it, so there it takes the **top two corners only** — inheriting all four would leave it floating with rounded corners against the copy below.
Checked before removing the clip: `.valueProps` beneath the hero is entirely static, so a positioned dropdown paints above it without a z-index fight.
## The test
Asserts the **last** option is the element actually painted at its own coordinates.
`toBeVisible()` would not have caught this — it checks for a non-empty box and `visibility`, and an ancestor's `overflow` clips neither. `elementFromPoint` catches clipping and occlusion alike.
**Honest gap:** I could not watch this test fail against a real unfixed build. Staging still has the old CSS, but the `school_autosuggest` flag went off there mid-verification (see below) and the test correctly skipped. It is reasoned-correct, not yet demonstrated-correct — worth re-running once the flag is back on.
## Unrelated, but visible from here
Both `school_autosuggest` and `admission_distance` are currently evaluating false on staging, while the unflagged `/api/suggest` still returns 8 results — so Typesense is healthy and this is the flag layer failing closed. Consistent with the Unleash connection error still being unresolved.
Verification: backend 158, frontend 284, `tsc` clean, `next build` green, 99 E2E collected.
.heroPanel had overflow: hidden to clip its artwork and scrim to the
rounded corners. It clipped the suggestion dropdown too. Measured on
staging with the flag on: the list runs 482 to 802, the panel ends at
624 — so 178px of 320 was cut off, about half the options, with nothing
on screen to say anything was missing.
The two things that actually needed clipping now round themselves:
.heroArt gets border-radius: inherit plus its own overflow, and the
::before scrim inherits the radius. Below 860px the artwork is a band
flush with the top of the panel rather than a layer covering it, so it
takes the top two corners only — inheriting all four would leave it
floating with rounded corners against the copy.
Nothing else depended on the panel clipping: .valueProps below it is
entirely static, so a positioned dropdown paints above it without a
z-index fight.
The regression test asserts the LAST option is the element actually
painted at its own coordinates. toBeVisible() would not have caught
this — it checks for a non-empty box and visibility, and an ancestor's
overflow clips neither. elementFromPoint catches clipping and occlusion
alike.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015mWQnpye9F299NVRCCSRvj
This PR fixes a CSS clipping bug where the hero panel's overflow:hidden was cutting off roughly half of the school-name autosuggest dropdown, by moving the clipping onto the two child layers (artwork and scrim) that actually need it via border-radius: inherit + overflow: hidden, and adds a new e2e test that verifies the last dropdown option is actually painted at its own coordinates. The change is narrowly scoped, well-commented, and the CSS restructuring looks internally consistent with the existing rules shown in the diff.
🟡 Minor
e2e/tests/journeys.spec.ts: options.count() is called right after an auto-retrying toBeVisible() assertion, but count() itself is a one-shot snapshot, not auto-retrying. If the suggestion list is still populating (e.g. results arrive in more than one batch) between the visibility check and the count() call, the test could measure a stale/smaller list and check the wrong 'last' option, making the test flaky rather than a reliable regression guard.
## 🤖 AI Code Review (Claude Code)
This PR fixes a CSS clipping bug where the hero panel's overflow:hidden was cutting off roughly half of the school-name autosuggest dropdown, by moving the clipping onto the two child layers (artwork and scrim) that actually need it via border-radius: inherit + overflow: hidden, and adds a new e2e test that verifies the last dropdown option is actually painted at its own coordinates. The change is narrowly scoped, well-commented, and the CSS restructuring looks internally consistent with the existing rules shown in the diff.
### 🟡 Minor
- **e2e/tests/journeys.spec.ts**: options.count() is called right after an auto-retrying toBeVisible() assertion, but count() itself is a one-shot snapshot, not auto-retrying. If the suggestion list is still populating (e.g. results arrive in more than one batch) between the visibility check and the count() call, the test could measure a stale/smaller list and check the wrong 'last' option, making the test flaky rather than a reliable regression guard.
tudor
merged commit d55f6cce23 into main2026-08-26 20:23: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.
Follow-up to #127, which merged while this was still being worked on.
The bug
.heroPanelhadoverflow: hiddento clip its artwork and gradient scrim to the rounded corners. It clipped the suggestion dropdown too. Measured on staging with the flag on:178px of 320 cut off — about half the options, with nothing on screen to indicate anything was missing.
The fix
The two things that actually needed clipping now round themselves:
.heroArttakesborder-radius: inheritplus its ownoverflow, and the::beforescrim inherits the radius. The panel stops clipping its children.Below 860px the artwork is a band flush with the top of the panel rather than a layer covering it, so there it takes the top two corners only — inheriting all four would leave it floating with rounded corners against the copy below.
Checked before removing the clip:
.valuePropsbeneath the hero is entirely static, so a positioned dropdown paints above it without a z-index fight.The test
Asserts the last option is the element actually painted at its own coordinates.
toBeVisible()would not have caught this — it checks for a non-empty box andvisibility, and an ancestor'soverflowclips neither.elementFromPointcatches clipping and occlusion alike.Honest gap: I could not watch this test fail against a real unfixed build. Staging still has the old CSS, but the
school_autosuggestflag went off there mid-verification (see below) and the test correctly skipped. It is reasoned-correct, not yet demonstrated-correct — worth re-running once the flag is back on.Unrelated, but visible from here
Both
school_autosuggestandadmission_distanceare currently evaluating false on staging, while the unflagged/api/suggeststill returns 8 results — so Typesense is healthy and this is the flag layer failing closed. Consistent with the Unleash connection error still being unresolved.Verification: backend 158, frontend 284,
tscclean,next buildgreen, 99 E2E collected.🤖 AI Code Review (Claude Code)
This PR fixes a CSS clipping bug where the hero panel's overflow:hidden was cutting off roughly half of the school-name autosuggest dropdown, by moving the clipping onto the two child layers (artwork and scrim) that actually need it via border-radius: inherit + overflow: hidden, and adds a new e2e test that verifies the last dropdown option is actually painted at its own coordinates. The change is narrowly scoped, well-commented, and the CSS restructuring looks internally consistent with the existing rules shown in the diff.
🟡 Minor