Fix: share popup not closing when clicking outside menu

src/components/ui/ShareMenu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 interface ShareMenuProps {
   targetType: "DECK" | "QUIZ" | "GROUP";
@@ -16,6 +16,24 @@ export function ShareMenu({ targetType, contentId, classSlug, compact = false }:
   const [copied, setCopied] = useState(false);
   const [isGroupShared, setIsGroupShared] = useState(false);
   const [groupName, setGroupName] = useState<string | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    function handlePointerDown(event: PointerEvent) {
+      const target = event.target as Node;
+      if (buttonRef.current?.contains(target) || menuRef.current?.contains(target)) {
+        return;
+      }
+
+      setOpen(false);
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
   
   useEffect(() => {
     if (!open) return;
@@ -63,6 +81,7 @@ export function ShareMenu({ targetType, contentId, classSlug, compact = false }:
   return (
     <div className="relative">
       <button
+        ref={buttonRef}
         onClick={() => setOpen(!open)}
         className={`${compact ? "h-8 w-8 rounded-lg" : "h-10 w-10 rounded-xl"} grid place-items-center text-text-muted transition-colors hover:bg-bg-surface-alt hover:text-primary`}
         title="Share"
@@ -75,7 +94,7 @@ export function ShareMenu({ targetType, contentId, classSlug, compact = false }:
       {open && (
         <>
           <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
-          <div className="absolute right-0 z-50 mt-2 w-72 origin-top-right animate-slide-up rounded-2xl border border-border-light bg-bg-surface p-5 shadow-[var(--shadow-modal)]">
+          <div ref={menuRef} className="absolute right-0 z-50 mt-2 w-72 origin-top-right animate-slide-up rounded-2xl border border-border-light bg-bg-surface p-5 shadow-[var(--shadow-modal)]">
             <h4 className="editorial-title mb-3 text-xl text-text-heading">Public sharing</h4>
             
             {loading ? (