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

Reviewed-on: #157

web/src/sections/Library/GameCard.tsx

@@ -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}