patch slashcommand popup to be usePortal

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/ToolsMenu/Tabs/SlashCommands/SlashCommandRow/index.jsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
 import { DotsThree } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 
@@ -13,6 +14,7 @@ export default function SlashCommandRow({
 }) {
   const { t } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
   const menuRef = useRef(null);
   const menuBtnRef = useRef(null);
 
@@ -32,6 +34,16 @@ export default function SlashCommandRow({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [menuOpen]);
 
+  useEffect(() => {
+    if (menuOpen && menuBtnRef.current) {
+      const rect = menuBtnRef.current.getBoundingClientRect();
+      setMenuPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.right + window.scrollX - 120,
+      });
+    }
+  }, [menuOpen]);
+
   return (
     <div
       onClick={onClick}
@@ -64,10 +76,16 @@ export default function SlashCommandRow({
             <DotsThree size={16} weight="bold" />
           </button>
 
-          {menuOpen && (
+          {menuOpen &&
+            createPortal(
               <div
                 ref={menuRef}
-              className="absolute right-0 top-full z-50 bg-zinc-800 light:bg-white border border-zinc-700 light:border-slate-300 rounded-lg shadow-lg min-w-[120px] flex flex-col overflow-hidden"
+                style={{
+                  position: "fixed",
+                  top: menuPosition.top,
+                  left: menuPosition.left,
+                }}
+                className="z-[9999] bg-zinc-800 light:bg-white border border-zinc-700 light:border-slate-300 rounded-lg shadow-lg min-w-[120px] flex flex-col overflow-hidden"
               >
                 <button
                   type="button"
@@ -91,7 +109,8 @@ export default function SlashCommandRow({
                 >
                   {t("chat_window.publish")}
                 </button>
-            </div>
+              </div>,
+              document.body
             )}
         </div>
       )}