From c4070392867ef8a99448617801199c07a7f29ee2 Mon Sep 17 00:00:00 2001
From: 1AhmedYasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Sun, 24 May 2026 15:49:37 +0300
Subject: [PATCH] fix(1024): Fixed endpoint modal overflow

---
 .../components/Flow/EdgeTypes/AddEndpointModal.tsx   |  2 +-
 GUI/src/components/Modal/Modal.scss                  |  5 +++++
 GUI/src/components/Modal/index.tsx                   | 12 ++++++++++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/GUI/src/components/Flow/EdgeTypes/AddEndpointModal.tsx b/GUI/src/components/Flow/EdgeTypes/AddEndpointModal.tsx
index 754559ac3..fcefee8f5 100644
--- a/GUI/src/components/Flow/EdgeTypes/AddEndpointModal.tsx
+++ b/GUI/src/components/Flow/EdgeTypes/AddEndpointModal.tsx
@@ -188,7 +188,7 @@ const AddEndpointModal: React.FC<AddEndpointModalProps> = ({
   const modalTitle = mode === 'edit' ? t('newService.editEndpoint') : t('newService.createNewEndpoint');
 
   return (
-    <Modal title={modalTitle} onClose={handleClose}>
+    <Modal title={modalTitle} onClose={handleClose} size="large">
       <Track isMultiline gap={16} direction="vertical" align="stretch">
         <ApiEndpointCard
           endpoint={endpoint}
diff --git a/GUI/src/components/Modal/Modal.scss b/GUI/src/components/Modal/Modal.scss
index 02db0f56f..45c7bf417 100644
--- a/GUI/src/components/Modal/Modal.scss
+++ b/GUI/src/components/Modal/Modal.scss
@@ -21,6 +21,11 @@
   max-width: 650px;
   z-index: 1000;
 
+  &--large {
+    min-width: 800px;
+    max-width: 900px;
+  }
+
   &__overlay {
     position: fixed;
     inset: 0;
diff --git a/GUI/src/components/Modal/index.tsx b/GUI/src/components/Modal/index.tsx
index 076ba9a87..974e3de58 100644
--- a/GUI/src/components/Modal/index.tsx
+++ b/GUI/src/components/Modal/index.tsx
@@ -9,16 +9,24 @@ type ModalProps = {
   description?: string;
   footer?: ReactNode;
   onClose: () => void;
+  size?: 'default' | 'large';
 };
 
-const Modal: FC<PropsWithChildren<ModalProps>> = ({ title, footer, onClose, children, description }) => {
+const Modal: FC<PropsWithChildren<ModalProps>> = ({
+  title,
+  footer,
+  onClose,
+  children,
+  description,
+  size = 'default',
+}) => {
   return (
     <RadixDialog.Root defaultOpen={true} onOpenChange={onClose}>
       <RadixDialog.Portal>
         <RadixDialog.Overlay className="modal__overlay" />
         <RadixDialog.Content
           onClick={(e) => e.stopPropagation()}
-          className="modal"
+          className={`modal${size === 'large' ? ' modal--large' : ''}`}
           aria-describedby={description ? 'modal-description' : undefined}
         >
           {title && (