Fixed buttons on nodes being draggable

src/frontend/src/components/promptComponent/index.tsx

@@ -4,6 +4,7 @@ import { TypeModal } from "../../constants/enums";
 import GenericModal from "../../modals/genericModal";
 import { PromptAreaComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
+import { Button } from "../ui/button";
 
 export default function PromptAreaComponent({
   field_name,
@@ -36,30 +37,32 @@ export default function PromptAreaComponent({
         nodeClass={nodeClass}
         setNodeClass={setNodeClass}
       >
-        <div className="flex w-full items-center gap-3">
-          <span
-            id={id}
-            data-testid={id}
-            className={
-              editNode
-                ? "input-edit-node input-dialog"
-                : (disabled ? "input-disable text-ring " : "") +
-                  " primary-input text-muted-foreground"
-            }
-          >
-            {value !== "" ? value : "Type your prompt here..."}
-          </span>
-          {!editNode && (
-            <IconComponent
+        <Button unstyled className="w-full">
+          <div className="flex w-full items-center gap-3">
+            <span
               id={id}
-              name="ExternalLink"
+              data-testid={id}
               className={
-                "icons-parameters-comp shrink-0" +
-                (disabled ? " text-ring" : " hover:text-accent-foreground")
+                editNode
+                  ? "input-edit-node input-dialog"
+                  : (disabled ? "input-disable text-ring " : "") +
+                    " primary-input text-muted-foreground"
               }
-            />
-          )}
-        </div>
+            >
+              {value !== "" ? value : "Type your prompt here..."}
+            </span>
+            {!editNode && (
+              <IconComponent
+                id={id}
+                name="ExternalLink"
+                className={
+                  "icons-parameters-comp shrink-0" +
+                  (disabled ? " text-ring" : " hover:text-accent-foreground")
+                }
+              />
+            )}
+          </div>
+        </Button>
       </GenericModal>
     </div>
   );

src/frontend/src/components/textAreaComponent/index.tsx

@@ -4,6 +4,7 @@ import { TypeModal } from "../../constants/enums";
 import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
+import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 
 export default function TextAreaComponent({
@@ -46,15 +47,17 @@ export default function TextAreaComponent({
             disabled={disabled}
           >
             {!editNode && (
-              <IconComponent
-                strokeWidth={1.5}
-                id={id}
-                name="ExternalLink"
-                className={
-                  "icons-parameters-comp shrink-0" +
-                  (disabled ? " text-ring" : " hover:text-accent-foreground")
-                }
-              />
+              <Button unstyled>
+                <IconComponent
+                  strokeWidth={1.5}
+                  id={id}
+                  name="ExternalLink"
+                  className={
+                    "icons-parameters-comp shrink-0" +
+                    (disabled ? " text-ring" : " hover:text-accent-foreground")
+                  }
+                />
+              </Button>
             )}
           </GenericModal>
         </div>

src/frontend/src/modals/genericModal/index.tsx

@@ -188,7 +188,7 @@ export default function GenericModal({
       open={modalOpen}
       setOpen={setModalOpen}
     >
-      <BaseModal.Trigger disable={disabled}>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger disable={disabled} asChild>{children}</BaseModal.Trigger>
       <BaseModal.Header
         description={(() => {
           switch (myModalTitle) {