💄 Scope the people card name hover to the profile link - #5011
Draft
bradystroud wants to merge 1 commit into
Draft
Conversation
Hovering a social icon on a homepage people card turned the person's name red as well as the icon, because the name's `group-hover:` was anchored to the whole card. The card then advertised the SSW People profile while the click under the pointer would open LinkedIn/X/GitHub. Move the group to the profile link itself (`group/profile`) so the name only reddens when the pointer is actually over the profile link — which still includes the whole card, since the link's stretched ::after overlay covers it. The card border keeps its card-level hover. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FEcohj2sV3u4MEgd3f3BTK
Contributor
|
No linked issues found. Please add the corresponding issues in the pull request description. |
Contributor
Coverage report
Test suite run success35 tests passing in 4 suites. Report generated by 🧪jest coverage report action from 6a3b511 |
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.
Hovering a social icon on a homepage people card lit up the person's name as well, so the card promised the SSW People profile while the click under the pointer went to LinkedIn/X/GitHub. This scopes the name's hover to the profile link.
/(homepage — "We work together to form an amazing collective brain")Fixed #, see A note on 🐛 Inconsistent hover behavior for SSW People icon on homepage #4875 below.The failure
On
main, resting the pointer on the LinkedIn icon of a people card turns two things red at once: the LinkedIn icon (correct) and the person's name (wrong — the name is the SSW People profile link, and that is not where this click goes). Same for the X and GitHub icons.Measured with Playwright on
main, hovering LinkedIn on Calum's card:rgb(204, 65, 65)— sswRedrgb(204, 65, 65)— sswRed, and it should not bergba(0, 0, 0, 0.9)— foregroundThe cause
components/blocks/v3/peopleCarousel/peopleCarousel.tsx. The card<div>carried Tailwind'sgroup, and the name usedgroup-hover:text-sswRed. The social icons live inside that card, so hovering any of them satisfiedgroup-hoverand reddened the name. The card is onegroupbut it holds two different link destinations.The fix
Three lines, one file. Move the group onto the profile link itself —
group/profile— and change the name togroup-hover/profile:text-sswRed. The card<div>no longer needsgroup.This does not shrink the click target. The profile link stretches across the whole card via its
after:absolute after:inset-0overlay, and a pointer over that overlay is a pointer over the link, so hovering anywhere on the card (photo, name, role, corners, the gaps between icons) still reddens the name. The social icons sit above the overlay onz-10, so they — and only they — are excluded. The card's red border still comes from the card's ownhover:border-sswRed, unchanged.Verification
Driven with Playwright against
next devat 1280×720, light mode, Chromium. Same script, same viewport, same card, before and after.The pointer is resting on the LinkedIn icon in both. Before: name red. After: name neutral, LinkedIn red like its siblings.
After the fix, each icon reddens alone and matches its siblings; the name reddens only for the profile link.
Computed colours re-measured after the fix — hovering LinkedIn: icon
rgb(204,65,65), namergba(0,0,0,0.9), card borderrgb(204,65,65). Hovering the name, the photo, the role text, a card corner, or the gap between two icons: namergb(204,65,65)anddocument.elementFromPointresolves tohttps://www.ssw.com.au/people/calum-simpson/— the stretched click target is intact.Before — the bug, in motion
before-people-card-hover.webm
main: the pointer visits LinkedIn, X, GitHub, then the name. The name turns red for every one of them.After — the fix, in motion
after-people-card-hover.webm
This branch: the same tour. Only the hovered icon reddens; the name waits its turn.
Also:
pnpm lintclean,pnpm test35/35 pass.A note on #4875
#4875 reports that the SSW People icon hovers differently from the LinkedIn and X icons beside it. That icon no longer exists — #4985 (AC 5) deleted the SSW-squares icon and moved the profile link onto the photo and name, which is what the issue asked for. So the bug as filed is not reproducible on
main, and I did not invent it: what I could reproduce, in the same hover system on the same cards, is the leftover above.I have deliberately not written
Fixed #4875— closing it is Adam's and Tiago's call, since the thread also carries the still-open "All SSW People" wording debate.Checklist
🤖 Generated with Claude Code
https://claude.ai/code/session_01FEcohj2sV3u4MEgd3f3BTK