fix: text selection

components/social/post-card-menu.tsx

@@ -19,7 +19,7 @@
  * elsewhere in the post action UI.
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Ban, Flag, MoreVertical, Trash2 } from "lucide-react";
 import { toast } from "sonner";
@@ -90,37 +90,35 @@ export function PostCardMenu({
     : post.author_name || "this user";
 
   // Desktop popover positioning: anchor below the trigger, right-aligned.
-  // Recompute every time we open + on resize so a viewport change between
-  // renders doesn't strand the popover at a stale coordinate.
+  // We measure in event handlers (the open click + resize/scroll), never
+  // synchronously inside an effect body, so opening can't trigger a
+  // cascading render. The effect below only wires the resize/scroll
+  // listeners while the popover is open.
+  const recompute = useCallback(() => {
+    const btn = triggerRef.current;
+    if (!btn) return;
+    const rect = btn.getBoundingClientRect();
+    const popoverW = 240;
+    const pad = 8;
+    // Right-align the popover to the trigger's right edge — feels natural
+    // for an overflow menu sitting in the top-right corner.
+    let left = rect.right - popoverW;
+    if (left < pad) left = pad;
+    if (left + popoverW > window.innerWidth - pad) {
+      left = window.innerWidth - popoverW - pad;
+    }
+    setPopPos({ top: rect.bottom + 4, left });
+  }, []);
+
   useEffect(() => {
-    if (!open || isMobile) {
-      setPopPos(null);
-      return;
-    }
-    function recompute() {
-      const btn = triggerRef.current;
-      if (!btn) return;
-      const rect = btn.getBoundingClientRect();
-      const popoverW = 240;
-      const pad = 8;
-      // Right-align the popover to the trigger's right edge — feels
-      // natural for an overflow menu sitting in the top-right corner.
-      let left = rect.right - popoverW;
-      if (left < pad) left = pad;
-      if (left + popoverW > window.innerWidth - pad) {
-        left = window.innerWidth - popoverW - pad;
-      }
-      const top = rect.bottom + 4;
-      setPopPos({ top, left });
-    }
-    recompute();
+    if (!open || isMobile) return;
     window.addEventListener("resize", recompute);
     window.addEventListener("scroll", recompute, true);
     return () => {
       window.removeEventListener("resize", recompute);
       window.removeEventListener("scroll", recompute, true);
     };
-  }, [open, isMobile]);
+  }, [open, isMobile, recompute]);
 
   // Click-outside + Escape to close (desktop only; the drawer's own
   // overlay handles dismissal on mobile).
@@ -202,7 +200,12 @@ export function PostCardMenu({
     <button
       ref={triggerRef}
       type="button"
-      onClick={() => setOpen((v) => !v)}
+      onClick={() => {
+        // Measure synchronously in the click (an event handler — safe) so
+        // the popover renders at the right spot on first paint.
+        if (!open && !isMobile) recompute();
+        setOpen((v) => !v);
+      }}
       aria-label="Post options"
       aria-haspopup="menu"
       aria-expanded={open}
@@ -219,7 +222,7 @@ export function PostCardMenu({
   // Menu surface: bottom drawer on mobile, floating popover on desktop.
   const menu = isMobile ? (
     <Drawer open={open} onOpenChange={(o) => setOpen(o)}>
-      <DrawerContent className="bg-card">
+      <DrawerContent className="bg-card select-none">
         <DrawerHeader className="text-left border-b border-border pb-3">
           <DrawerTitle>Post options</DrawerTitle>
         </DrawerHeader>
@@ -242,7 +245,7 @@ export function PostCardMenu({
           zIndex: 60,
         }}
         className={cn(
-          "w-60 rounded-lg border border-border bg-card shadow-lg py-1",
+          "w-60 rounded-lg border border-border bg-card shadow-lg py-1 select-none",
           "animate-in fade-in-0 zoom-in-95",
         )}
       >