diff --git a/web/src/sections/Library/GameCard.tsx b/web/src/sections/Library/GameCard.tsx index fdb5d723..ebfcf2e4 100644 --- a/web/src/sections/Library/GameCard.tsx +++ b/web/src/sections/Library/GameCard.tsx @@ -122,10 +122,22 @@ export const GameCard: FC = ({ {/* 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`. */}