sassycrown/punktfunk
1
0
Fork 0
forked from unom/punktfunk
Code Pull Requests Activity

Merge pull request 'The library's hide button was invisible AND clickable — a corner nobody could see dropped games' (#157) from worktree-library-hide-affordance into main

Browse Source 
Reviewed-on: unom/punktfunk#157
This commit is contained in:
enricobuehler
2026-08-10 18:37:03 +00:00
parent 88c1e94d94 e93947969f
commit bd26949e0a
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/sections/Library/GameCard.tsx
+19 -3
View File
@@ -122,10 +122,22 @@ export const GameCard: FC<GameCardProps> = ({
{/* A hidden card keeps its controls VISIBLE rather than hover-revealed. Hover-to-reveal
is fine for an ordinary tile, but the un-hide button is the only way out of the
hidden state — requiring a hover to discover it would strand anyone on a touch
screen, which is exactly where the console's pointer work landed. */}
screen, which is exactly where the console's pointer work landed.
Two rules that used to be one, because `opacity-0` alone got BOTH of them wrong:
1. Invisible must also mean UNCLICKABLE. An `opacity-0` element paints nothing and
still hit-tests, so the top-right corner of every poster was a live hide button
nobody could see — a stray click there dropped that title from every play
surface with no visible cause. Opacity and `pointer-events` move together now.
2. The reveal cannot rest on hover ALONE. `:hover` never fires on a touch screen,
so the control was unreachable there by construction and discoverable only by
blind-clicking the corner. `pointer-coarse` shows it outright wherever the
device has no hover to give. Keyboard reach is unaffected: `pointer-events:
none` does not block focus, so tabbing in still trips `focus-within`. */}
<div
className={`absolute right-2 top-2 flex gap-1 transition-opacity focus-within:opacity-100 group-hover:opacity-100${
hidden ? "" : " opacity-0"
className={`absolute right-2 top-2 flex gap-1 transition-opacity ${
hidden
? "opacity-100"
: "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:pointer-events-auto"
}`}
>
<Button
@@ -135,6 +147,10 @@ export const GameCard: FC<GameCardProps> = ({
aria-label={
hidden ? m.library_unhide_action() : m.library_hide_action()
}
// A bare eye-with-slash is the only control on a SCANNED entry's card, with no
// edit/delete beside it to imply a toolbar. The native tooltip is what tells a
// pointer user what the icon does before they click and a game vanishes.
title={hidden ? m.library_unhide_action() : m.library_hide_action()}
aria-pressed={hidden}
disabled={hiding}
onClick={onToggleHidden}