fix(frontend): restore hover/click on Community rail rows - #63
Merged
Conversation
The playdate-badge commit (848a5f5) wrapped each row in a plain div with an absolutely-positioned full-row Link underneath, but also gave the avatar and name/city content their own `relative z-0`. Same z-index + later DOM order meant those decorative elements painted (and hit-tested) above the link, so clicking the avatar or the family name — the two most obvious click targets — hit inert spans instead of navigating, and the cursor never showed a hand over them. Swap `relative z-0` for `pointer-events-none` on the decorative avatar/ name content so clicks and hover fall through to the underlying link, and add `pointer-events-auto` to the nested Playdate badge link so it stays independently clickable above the row link. Verified with a standalone Playwright repro of the exact before/after CSS: before, elementFromPoint at the name's coordinates resolved to the name div (cursor: auto) and a real click there produced no navigation; after, it resolves to the row link (cursor: pointer) and the click fires correctly, with the Playdate badge unaffected in both cases. Adds frontend/e2e/home-community-rail.spec.ts covering direct clicks on the name and the avatar, plus the pointer-cursor affordance.
…test seed-dummy.ts backfilled dicebear avatars onto the dummy families after this branch was cut, so the Davis family row may now render an <img> instead of the aria-hidden initials span this test originally assumed.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Linkunderneath, but also gave the avatar and name/city contentrelative z-0— same z-index, later in DOM order, so those decorative elements painted and hit-tested above the link.<span>/<img>elements instead of navigating, and the cursor never showed a pointer over them. Only clicking the empty padding around them worked.relative z-0forpointer-events-noneon the decorative avatar/name content so clicks and hover fall through to the underlying link, and addpointer-events-autoto the nested Playdate badge link so it stays independently clickable above the row link.Verification
elementFromPointat the name's coordinates resolved to the name<div>(cursor: auto) and a real coordinate click there produced no navigation; after, it resolves to the row<a>(cursor: pointer) and the click fires correctly. The Playdate badge remained independently clickable in both cases.tsc --noEmitclean.frontend/e2e/home-community-rail.spec.ts(clicks directly on the name text and on the avatar, plus a pointer-cursor assertion) — written to this repo's Playwright conventions but not run live against the deployed Supabase environment in this session (no local credentials).Test plan
npm run test:e2e --workspace frontend -- home-community-railagainst a real environmentnpm run typecheck --workspace frontendnpm run test --workspace frontend -- --run🤖 Generated with Claude Code