From 0db339254d7de9ec01f5bf6b5c50511689225259 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Fri, 5 Jun 2026 14:13:13 +0530
Subject: [PATCH] fix: text selection

---
 components/social/collection-scroll-card.tsx  |  2 +-
 components/social/edit-collection-drawer.tsx  |  8 +--
 components/social/page-bookmarks.tsx          |  2 +-
 components/social/post-card-menu.tsx          | 59 ++++++++++---------
 components/social/post-card.tsx               |  2 +-
 components/social/post-scroll-card.tsx        |  2 +-
 components/social/report-dialog.tsx           |  6 +-
 components/social/share-post-sheet.tsx        |  2 +-
 components/social/update-background-modal.tsx |  2 +-
 9 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/components/social/collection-scroll-card.tsx b/components/social/collection-scroll-card.tsx
index 7ee3c67d..de298d50 100644
--- a/components/social/collection-scroll-card.tsx
+++ b/components/social/collection-scroll-card.tsx
@@ -119,7 +119,7 @@ export function CollectionScrollCard({
   const showArrows = slideCount > 1;
 
   return (
-    <article ref={cardRef} className="space-y-3">
+    <article ref={cardRef} className="space-y-3 select-none">
       <div className="relative max-w-xl mx-auto">
         <div
           ref={scrollRef}
diff --git a/components/social/edit-collection-drawer.tsx b/components/social/edit-collection-drawer.tsx
index bc07d9f9..7c096161 100644
--- a/components/social/edit-collection-drawer.tsx
+++ b/components/social/edit-collection-drawer.tsx
@@ -208,7 +208,7 @@ export function EditCollectionDrawer({
               : "max-w-md sm:max-w-lg"
           }
         >
-          <DrawerHeader className="shrink-0 text-left flex items-center justify-between pb-2">
+          <DrawerHeader className="shrink-0 text-left flex items-center justify-between pb-2 select-none">
             <DrawerTitle>Edit collection</DrawerTitle>
             <DrawerClose asChild>
               <button
@@ -222,7 +222,7 @@ export function EditCollectionDrawer({
             </DrawerClose>
           </DrawerHeader>
 
-          <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 space-y-5">
+          <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 space-y-5 select-none">
             {/* Cover */}
             <section className="flex items-start gap-4">
               <div className="relative size-24 rounded-lg overflow-hidden bg-muted ring-1 ring-foreground/10 shrink-0">
@@ -283,7 +283,7 @@ export function EditCollectionDrawer({
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 maxLength={120}
-                className="w-full bg-background text-foreground text-base rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+                className="w-full bg-background text-foreground text-base rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 select-text"
               />
             </section>
 
@@ -297,7 +297,7 @@ export function EditCollectionDrawer({
                 onChange={(e) => setDescription(e.target.value)}
                 rows={3}
                 placeholder="Optional"
-                className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 resize-none"
+                className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 resize-none select-text"
               />
             </section>
 
diff --git a/components/social/page-bookmarks.tsx b/components/social/page-bookmarks.tsx
index 04e0e7f1..a1f5b56e 100644
--- a/components/social/page-bookmarks.tsx
+++ b/components/social/page-bookmarks.tsx
@@ -195,7 +195,7 @@ export function PageBookmarks() {
             left: m.left,
             zIndex: 5,
           }}
-          className="pointer-events-none"
+          className="pointer-events-none select-none"
         >
           <div className="pointer-events-auto relative inline-flex items-center gap-1 rounded-full bg-violet-500 shadow-lg px-2.5 py-1 animate-in fade-in-0 zoom-in-95">
             <Bookmark className="size-3.5 text-white" />
diff --git a/components/social/post-card-menu.tsx b/components/social/post-card-menu.tsx
index 836fce64..87eb5e10 100644
--- a/components/social/post-card-menu.tsx
+++ b/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",
         )}
       >
diff --git a/components/social/post-card.tsx b/components/social/post-card.tsx
index 488c6209..0682ebef 100644
--- a/components/social/post-card.tsx
+++ b/components/social/post-card.tsx
@@ -45,7 +45,7 @@ export function PostCard({
   const authorHandle = post.author_handle ?? null;
 
   return (
-    <article className="rounded-xl bg-card ring-1 ring-foreground/10 p-5">
+    <article className="rounded-xl bg-card ring-1 ring-foreground/10 p-5 select-none">
       {/* Reshare attribution — only on rows that are themselves
           reshares. The link goes to the original author's profile;
           their handle is rendered inline so the source is obvious.
diff --git a/components/social/post-scroll-card.tsx b/components/social/post-scroll-card.tsx
index 0b9be11c..98c73268 100644
--- a/components/social/post-scroll-card.tsx
+++ b/components/social/post-scroll-card.tsx
@@ -73,7 +73,7 @@ export function PostScrollCard({
   return (
     <article
       id={`post-${post.id}`}
-      className="rounded-2xl overflow-hidden bg-card ring-1 ring-foreground/10 scroll-mt-20 sm:scroll-mt-24"
+      className="rounded-2xl overflow-hidden bg-card ring-1 ring-foreground/10 scroll-mt-20 sm:scroll-mt-24 select-none"
     >
       {/* Reshare attribution — only on rows that are themselves
           reshares. Tappable link → original author's profile. The card
diff --git a/components/social/report-dialog.tsx b/components/social/report-dialog.tsx
index 2bba6eb7..b650e700 100644
--- a/components/social/report-dialog.tsx
+++ b/components/social/report-dialog.tsx
@@ -125,7 +125,7 @@ export function ReportDialog({
           rows={3}
           maxLength={2000}
           placeholder="Add any context that will help us review this"
-          className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+          className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 select-text"
         />
       </div>
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
@@ -144,7 +144,7 @@ export function ReportDialog({
   if (isMobile) {
     return (
       <Drawer open={open} onOpenChange={(o) => !o && !working && onClose()}>
-        <DrawerContent className="bg-card">
+        <DrawerContent className="bg-card select-none">
           <DrawerHeader className="text-left">
             <DrawerTitle>{title}</DrawerTitle>
             <DrawerDescription>{description}</DrawerDescription>
@@ -168,7 +168,7 @@ export function ReportDialog({
         aria-modal="true"
         className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
       >
-        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
+        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden select-none">
           <div className="flex items-start gap-3 px-5 pt-5 pb-1">
             <div className="flex-1 min-w-0">
               <h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
diff --git a/components/social/share-post-sheet.tsx b/components/social/share-post-sheet.tsx
index 6609fbc1..153db65c 100644
--- a/components/social/share-post-sheet.tsx
+++ b/components/social/share-post-sheet.tsx
@@ -445,7 +445,7 @@ export function SharePostSheet({
       onOpenChange={(o) => !o && onClose()}
       direction={direction}
     >
-      <DrawerContent direction={direction} className="bg-card">
+      <DrawerContent direction={direction} className="bg-card select-none">
         <DrawerHeader className="text-left border-b border-border pb-4">
           <DrawerTitle>Share post</DrawerTitle>
           <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
diff --git a/components/social/update-background-modal.tsx b/components/social/update-background-modal.tsx
index d089116c..7aa213e9 100644
--- a/components/social/update-background-modal.tsx
+++ b/components/social/update-background-modal.tsx
@@ -202,7 +202,7 @@ export function UpdateBackgroundModal({
         aria-labelledby="update-bg-title"
         className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
       >
-        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
+        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden select-none">
           <div className="flex items-start gap-3 px-5 pt-5 pb-3">
             <span
               className="shrink-0 size-10 rounded-full bg-primary/10 text-primary flex items-center justify-center"