fix: ui fix

components/feed/new-users-strip.tsx

@@ -18,7 +18,14 @@ export function NewUsersStrip({ users }: { users: UserSummary[] }) {
   // Mouse drag-to-scroll. Touch/trackpad use native overflow scrolling, so we
   // only engage for mouse; `moved` suppresses the click that would otherwise
   // fire after a drag (and navigate to a profile).
-  const drag = useRef({ down: false, startX: 0, startScroll: 0, moved: false });
+  const drag = useRef({
+    down: false,
+    startX: 0,
+    startScroll: 0,
+    moved: false,
+    pointerId: -1,
+    captured: false,
+  });
 
   if (users.length === 0) return null;
 
@@ -26,26 +33,41 @@ export function NewUsersStrip({ users }: { users: UserSummary[] }) {
     if (e.pointerType !== "mouse") return;
     const el = scrollRef.current;
     if (!el) return;
+    // Record the start but DON'T capture yet — capturing here would retarget
+    // the click to this container, so a plain click on a card never reaches
+    // the <Link> (no navigation). We capture only once a real drag starts.
     drag.current = {
       down: true,
       startX: e.clientX,
       startScroll: el.scrollLeft,
       moved: false,
+      pointerId: e.pointerId,
+      captured: false,
     };
-    el.setPointerCapture(e.pointerId);
   }
   function onPointerMove(e: React.PointerEvent) {
     if (!drag.current.down) return;
     const el = scrollRef.current;
     if (!el) return;
     const dx = e.clientX - drag.current.startX;
-    if (Math.abs(dx) > 4) drag.current.moved = true;
+    if (Math.abs(dx) > 4) {
-    el.scrollLeft = drag.current.startScroll - dx;
+      drag.current.moved = true;
+      // Capture now so the drag keeps tracking even if the pointer leaves
+      // the strip; a click (no movement) never gets here, so it navigates.
+      if (!drag.current.captured) {
+        el.setPointerCapture(drag.current.pointerId);
+        drag.current.captured = true;
       }
-  function onPointerUp(e: React.PointerEvent) {
+    }
+    if (drag.current.moved) el.scrollLeft = drag.current.startScroll - dx;
+  }
+  function onPointerUp() {
     if (!drag.current.down) return;
     drag.current.down = false;
-    scrollRef.current?.releasePointerCapture(e.pointerId);
+    if (drag.current.captured) {
+      scrollRef.current?.releasePointerCapture(drag.current.pointerId);
+      drag.current.captured = false;
+    }
   }
   function onClickCapture(e: React.MouseEvent) {
     if (drag.current.moved) {
@@ -76,7 +98,7 @@ export function NewUsersStrip({ users }: { users: UserSummary[] }) {
         onPointerUp={onPointerUp}
         onPointerCancel={onPointerUp}
         onClickCapture={onClickCapture}
-        className="-mx-5 flex gap-3 overflow-x-auto px-5 py-1 snap-x scroll-px-5 cursor-grab active:cursor-grabbing [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+        className="-mx-5 flex gap-3 overflow-x-auto px-5 py-1 snap-x scroll-px-5 cursor-grab select-none active:cursor-grabbing [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
       >
         {users.map((u) => (
           <Link