fix: ui fixes

components/social/comment/comment-menu.tsx

@@ -2,12 +2,14 @@
 
 /**
  * CommentMenu — the kebab (⋮) overflow menu on a comment: Pin / Report /
- * Delete (each shown only when permitted). Rendered in a portal with a
+ * Delete (each shown only when permitted). The menu is portaled (fixed
- * transparent full-screen backdrop that swallows the dismiss click, so it
+ * position) so it isn't clipped by the comments drawer's overflow, and it
- * can't reach (and accidentally close) the surrounding vaul comments drawer.
+ * dismisses via a deferred document `pointerdown`-capture listener + Escape +
+ * close-on-scroll; the trigger itself toggles. Closing only ever flips this
+ * menu's own state, so it never closes the surrounding vaul drawer.
  */
 
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Flag, MoreVertical, Pin, PinOff, Trash2 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -32,11 +34,45 @@ export function CommentMenu({
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState<{ top: number; right: number } | null>(null);
   const btnRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Dismiss on any outside pointer-down, Escape, or scroll. Deferred by a tick
+  // so the same click that opened the menu doesn't immediately close it.
+  // Capture phase so it fires regardless of where the target lives in the tree.
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e: PointerEvent) {
+      const t = e.target as Node;
+      if (menuRef.current?.contains(t) || btnRef.current?.contains(t)) return;
+      setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    function onScroll() {
+      setOpen(false);
+    }
+    const id = window.setTimeout(() => {
+      document.addEventListener("pointerdown", onDown, true);
+      document.addEventListener("keydown", onKey);
+      window.addEventListener("scroll", onScroll, true);
+    }, 0);
+    return () => {
+      window.clearTimeout(id);
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [open]);
 
   // Nothing actionable → no kebab at all.
   if (!canPin && !canDelete && !canReport) return null;
 
-  function openMenu() {
+  function toggle() {
+    if (open) {
+      setOpen(false);
+      return;
+    }
     const r = btnRef.current?.getBoundingClientRect();
     if (r) setPos({ top: r.bottom + 4, right: window.innerWidth - r.right });
     setOpen(true);
@@ -47,7 +83,7 @@ export function CommentMenu({
       <button
         ref={btnRef}
         type="button"
-        onClick={openMenu}
+        onClick={toggle}
         aria-label="Comment options"
         aria-haspopup="menu"
         aria-expanded={open}
@@ -57,56 +93,47 @@ export function CommentMenu({
       </button>
       {open && pos && typeof document !== "undefined"
         ? createPortal(
-            <>
+            <div
-              <div
+              ref={menuRef}
-                className="fixed inset-0 z-[100]"
+              role="menu"
-                aria-hidden
+              style={{ position: "fixed", top: pos.top, right: pos.right }}
-                onClick={(e) => {
+              className="z-[101] min-w-40 rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95"
-                  e.stopPropagation();
+            >
-                  setOpen(false);
+              {canPin ? (
-                }}
+                <MenuItem
-              />
+                  icon={isPinned ? <PinOff className="size-4" /> : <Pin className="size-4" />}
-              <div
+                  onClick={() => {
-                role="menu"
+                    setOpen(false);
-                style={{ position: "fixed", top: pos.top, right: pos.right }}
+                    onPin();
-                className="z-[101] min-w-40 rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95"
+                  }}
-              >
+                >
-                {canPin ? (
+                  {isPinned ? "Unpin" : "Pin"}
-                  <MenuItem
+                </MenuItem>
-                    icon={isPinned ? <PinOff className="size-4" /> : <Pin className="size-4" />}
+              ) : null}
-                    onClick={() => {
+              {canReport ? (
-                      setOpen(false);
+                <MenuItem
-                      onPin();
+                  icon={<Flag className="size-4" />}
-                    }}
+                  onClick={() => {
-                  >
+                    setOpen(false);
-                    {isPinned ? "Unpin" : "Pin"}
+                    onReport();
-                  </MenuItem>
+                  }}
-                ) : null}
+                >
-                {canReport ? (
+                  Report
-                  <MenuItem
+                </MenuItem>
-                    icon={<Flag className="size-4" />}
+              ) : null}
-                    onClick={() => {
+              {canDelete ? (
-                      setOpen(false);
+                <MenuItem
-                      onReport();
+                  icon={<Trash2 className="size-4" />}
-                    }}
+                  danger
-                  >
+                  onClick={() => {
-                    Report
+                    setOpen(false);
-                  </MenuItem>
+                    onDelete();
-                ) : null}
+                  }}
-                {canDelete ? (
+                >
-                  <MenuItem
+                  Delete
-                    icon={<Trash2 className="size-4" />}
+                </MenuItem>
-                    danger
+              ) : null}
-                    onClick={() => {
+            </div>,
-                      setOpen(false);
-                      onDelete();
-                    }}
-                  >
-                    Delete
-                  </MenuItem>
-                ) : null}
-              </div>
-            </>,
             document.body,
           )
         : null}

components/ui/emoji-picker.tsx

@@ -127,9 +127,17 @@ export function EmojiPicker({
                   width: PANEL_WIDTH,
                   maxWidth: "calc(100vw - 1rem)",
                 }}
-                className="z-[101] rounded-xl border border-border bg-card shadow-xl p-2 animate-in fade-in-0 zoom-in-95"
+                className="z-[101] flex max-h-[min(60vh,20rem)] flex-col rounded-xl border border-border bg-card shadow-xl animate-in fade-in-0 zoom-in-95"
               >
-                <div className="max-h-60 overflow-y-auto overscroll-contain">
+                <div
+                  // min-h-0 lets this flex child shrink below its content so it
+                  // actually scrolls; stopPropagation keeps the wheel/touch from
+                  // reaching the host drawer (vaul) and being hijacked.
+                  className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-2"
+                  style={{ WebkitOverflowScrolling: "touch", touchAction: "pan-y" }}
+                  onWheel={(e) => e.stopPropagation()}
+                  onTouchMove={(e) => e.stopPropagation()}
+                >
                   {EMOJI_GROUPS.map((g) => (
                     <div key={g.label} className="mb-1.5">
                       <p className="px-1 pb-0.5 pt-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">