fix: ui fixes in emoji picker

components/social/comment/comment-menu.tsx

@@ -97,7 +97,10 @@ export function CommentMenu({
               ref={menuRef}
               role="menu"
               style={{ position: "fixed", top: pos.top, right: pos.right }}
-              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"
+              // pointer-events-auto: the comments drawer is modal (vaul sets
+              // body { pointer-events: none } while open); this portaled menu
+              // would be click-through without re-enabling it here.
+              className="pointer-events-auto 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 ? (
                 <MenuItem

components/ui/emoji-picker.tsx

@@ -13,7 +13,7 @@
  * caller decides what to do with each via `onSelect`.
  */
 
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Smile } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -71,6 +71,32 @@ export function EmojiPicker({
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState<{ bottom: number; left: number } | null>(null);
   const btnRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Dismiss on any outside pointer-down or Escape. Deferred a tick so the
+  // opening click doesn't immediately re-close it; capture phase so it fires
+  // wherever the target lives. No close-on-scroll here — the panel scrolls
+  // internally, so a scroll inside it must NOT dismiss.
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e: PointerEvent) {
+      const t = e.target as Node;
+      if (panelRef.current?.contains(t) || btnRef.current?.contains(t)) return;
+      setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    const id = window.setTimeout(() => {
+      document.addEventListener("pointerdown", onDown, true);
+      document.addEventListener("keydown", onKey);
+    }, 0);
+    return () => {
+      window.clearTimeout(id);
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
 
   function toggle() {
     if (open) {
@@ -108,16 +134,8 @@ export function EmojiPicker({
       </button>
       {open && pos && typeof document !== "undefined"
         ? createPortal(
-            <>
-              <div
-                className="fixed inset-0 z-[100]"
-                aria-hidden
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setOpen(false);
-                }}
-              />
             <div
+              ref={panelRef}
               role="dialog"
               aria-label="Emoji picker"
               style={{
@@ -127,7 +145,10 @@ export function EmojiPicker({
                 width: PANEL_WIDTH,
                 maxWidth: "calc(100vw - 1rem)",
               }}
-                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"
+              // pointer-events-auto: vaul makes the drawer modal, setting
+              // body { pointer-events: none } while open — a body-portaled
+              // panel inherits it and would be click-through without this.
+              className="pointer-events-auto z-[101] flex max-h-80 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-xl animate-in fade-in-0 zoom-in-95"
             >
               <div
                 // min-h-0 lets this flex child shrink below its content so it
@@ -159,8 +180,7 @@ export function EmojiPicker({
                   </div>
                 ))}
               </div>
-              </div>
+            </div>,
-            </>,
             document.body,
           )
         : null}