fix: Multi-select swallows taps on mobile document list items (#13261)

The icon column stretched to the full height of a list item, so on mobile
– where items are tall enough to wrap a context snippet and meta – a large
strip down the left of every item toggled selection instead of navigating.
Hug the icon so that only a click on the icon itself begins a selection.

Also limit revealing the checkbox to real hover. On touch devices `hover`
resolves to `active`, and the rule additionally matched focus, so simply
tapping an item to navigate swapped its icon for an empty checkbox and the
state persisted. There the checkbox now appears once a selection is active.


Claude-Session: https://claude.ai/code/session_01WUpKTb4aEtvUwfQQoMC53v

Co-authored-by: Claude <noreply@anthropic.com>

app/components/DocumentListItem.tsx

@@ -272,6 +272,10 @@ const IconWrapper = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   width: 24px;
+  /* Hug the icon rather than stretching to the height of the item, so that only
+  clicks landing on the icon itself begin a selection – the remainder of the
+  item navigates. */
+  align-self: flex-start;
 `;
 
 const DocumentIconWrapper = styled.span<{ $dimmed: boolean }>`
@@ -376,18 +380,6 @@ const DocumentLink = styled(Link)<{
       opacity: 1;
     }
 
-    ${(props) =>
-      props.$selectable &&
-      css`
-        ${SelectButton} {
-          opacity: 1;
-        }
-
-        ${DocumentIconWrapper} {
-          opacity: 0;
-        }
-      `}
-
     ${AnimatedStar} {
       opacity: 0.5;
 
@@ -397,6 +389,28 @@ const DocumentLink = styled(Link)<{
     }
   }
 
+  /* Revealing the checkbox is a hover affordance only – on touch devices the
+  equivalent states (active, focus) are triggered by tapping the item to
+  navigate, which makes an item appear selected when it is not. There, the
+  checkbox appears once a selection is underway. */
+  @media (hover: hover) {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      ${(props) =>
+        props.$selectable &&
+        css`
+          ${SelectButton} {
+            opacity: 1;
+          }
+
+          ${DocumentIconWrapper} {
+            opacity: 0;
+          }
+        `}
+    }
+  }
+
   ${(props) =>
     props.$menuOpen &&
     css`