fix: improve modal z-index and keyboard event handling (#5898)

📝 (NodeOutputfield/index.tsx): Add styleClasses property with value "z-40" to improve styling
📝 (outputModal/index.tsx): Add className property with value "z-50" to improve styling
📝 (textModal/index.tsx): Add handleEscapeKeyDown function to handle escape key event and close modal

src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx

@@ -378,6 +378,7 @@ function NodeOutputField({
                   : "Inspect output"
                 : "Please build the component first"
             }
+            styleClasses="z-40"
           >
             <div className="flex items-center gap-2">
               <OutputModal

src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx

@@ -11,7 +11,7 @@ export default function OutputModal({
 }): JSX.Element {
   const [activeTab, setActiveTab] = useState<"Outputs" | "Logs">("Outputs");
   return (
-    <BaseModal disable={disabled} size="large">
+    <BaseModal disable={disabled} size="large" className="z-50">
       <BaseModal.Header description="Inspect the output of the component below.">
         <div className="flex items-center">
           <span className="pr-2">Component Output</span>

src/frontend/src/modals/textModal/index.tsx

@@ -26,8 +26,18 @@ export default function TextModal({
   const [open, setOpen] = useState(false);
   const [internalValue, setInternalValue] = useState(value);
 
+  const handleEscapeKeyDown = (event: KeyboardEvent) => {
+    setOpen(false);
+    event.stopPropagation();
+  };
+
   return (
-    <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
+    <BaseModal
+      size="medium-h-full"
+      open={open}
+      setOpen={setOpen}
+      onEscapeKeyDown={handleEscapeKeyDown}
+    >
       <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
       <BaseModal.Header description={""}>
         <span className="pr-2">View Text</span>