the select circle was unreachable by hover

`group` sat on the overlay <Link>. The checkbox is that link's SIBLING, not
its child, so `group-hover` could never have matched — and nothing in the
file used a `group-*` utility at all, so the class was inert.

The checkbox therefore fell back to its own `hover:opacity-100`, which
fires only once the pointer is already over an invisible 20px circle. The
affordance was there and unfindable, which reads as "there is no way to
select a photo".

`group` moves to the wrapper, the checkbox reads `group-hover`, and the
two dead `group` classes on the overlays are dropped.

Touch is still unserved: no hover means no way to begin a selection.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/AssetTile.tsx

@@ -10,6 +10,11 @@ import { ASSET_PARAM, formatDuration, thumbUrl } from './shared';
 // into a tab, linked to, and closed with the back button. The select checkbox is a sibling <button> layered
 // over it, never nested inside the anchor: a button inside an anchor is invalid HTML and swallows the
 // keyboard behaviour of both.
+//
+// That sibling relationship is why `group` belongs on the WRAPPER. It sat on the overlay link instead, which
+// the checkbox is not inside, so `group-hover` could never have reached it — and the checkbox fell back to
+// its own `hover`, revealing itself only when the pointer was already over the invisible 20px circle. The
+// affordance existed and was unfindable.
 
 type AssetTileProps = {
   asset: GridAsset;
@@ -69,19 +74,19 @@ export const AssetTile = ({ asset, token, width, height, selected, selecting, on
   );
 
   return (
-    <div className="relative shrink-0 overflow-hidden rounded-sm" style={{ width, height }}>
+    <div className="group relative shrink-0 overflow-hidden rounded-sm" style={{ width, height }}>
       {selecting ? (
         // Once a selection exists, a plain click extends it rather than navigating — matching Immich, where
         // you can rubber-band through a month without the lightbox opening on every tile.
         <button
           type="button"
           onClick={(ev) => onToggle(asset.id, ev)}
-          className="group absolute inset-0 block h-full w-full cursor-pointer"
+          className="absolute inset-0 block h-full w-full cursor-pointer"
         >
           {inner}
         </button>
       ) : (
-        <Link to={href} className="group absolute inset-0 block h-full w-full">
+        <Link to={href} className="absolute inset-0 block h-full w-full">
           {inner}
         </Link>
       )}
@@ -91,7 +96,7 @@ export const AssetTile = ({ asset, token, width, height, selected, selecting, on
         onClick={(ev) => onToggle(asset.id, ev)}
         title={selected ? 'Deselect' : 'Select'}
         className={`absolute left-1.5 top-1.5 rounded-full text-white transition-opacity ${
-          selected ? 'opacity-100' : 'opacity-0 hover:opacity-100 focus-visible:opacity-100'
+          selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100'
         } ${selecting ? 'opacity-100' : ''}`}
       >
         {selected ? (