From db595ff7278d2d5ff882fc64dd421c792c9f5f75 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 11 Nov 2024 18:10:41 +0100
Subject: [PATCH 1/5] fix(frontend): set height and width values for evaluator
 modal

---
 .../autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
index a9e70174ed..ea44861217 100644
--- a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
+++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
@@ -159,7 +159,14 @@ const EvaluatorsModal = ({...props}: EvaluatorsModalProps) => {
     return (
         <Modal
             footer={null}
-            width={current === 2 && !debugEvaluator ? 600 : 1200}
+            style={{
+                height: "95vh",
+                width: current === 2 && !debugEvaluator ? "600px" : "80vw",
+                maxWidth: "1800px",
+                maxHeight: "1100px",
+                minWidth: current === 2 && !debugEvaluator ? "600px" : "1200px",
+                minHeight: "800px",
+            }}
             closeIcon={null}
             title={null}
             className={classes.modalWrapper}

From 62316a2c5ccb6cee07db0a6d2bb0e62e2e76747e Mon Sep 17 00:00:00 2001
From: Mahmoud Mabrouk <mahmoud@agenta.ai>
Date: Tue, 12 Nov 2024 13:49:40 +0100
Subject: [PATCH 2/5] Update EvaluatorsModal.tsx

---
 .../autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
index ea44861217..c018aa7e39 100644
--- a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
+++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
@@ -161,7 +161,7 @@ const EvaluatorsModal = ({...props}: EvaluatorsModalProps) => {
             footer={null}
             style={{
                 height: "95vh",
-                width: current === 2 && !debugEvaluator ? "600px" : "80vw",
+                width: current === 2 && !debugEvaluator ? "600px" : "90vw",
                 maxWidth: "1800px",
                 maxHeight: "1100px",
                 minWidth: current === 2 && !debugEvaluator ? "600px" : "1200px",

From de973f3221dc1782c5096698f0ab262202599f1a Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 14 Nov 2024 13:59:24 +0100
Subject: [PATCH 3/5] fix(frontend): updated evaluator modal styles

---
 .../EvaluatorsModal/EvaluatorsModal.tsx       | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
index c018aa7e39..53d99ac647 100644
--- a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
+++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
@@ -16,21 +16,31 @@ import {useLocalStorage} from "usehooks-ts"
 type EvaluatorsModalProps = {} & React.ComponentProps<typeof Modal>
 
 const useStyles = createUseStyles(() => ({
-    modalWrapper: {
+    modalWrapper: ({current, debugEvaluator}: {current: number; debugEvaluator: boolean}) => ({
+        height: "95vh",
+        width: `${current === 2 && !debugEvaluator ? "600px" : "90vw"} !important`,
+        maxWidth: "1800px",
+        maxHeight: "1100px",
+        minWidth: current === 2 && !debugEvaluator ? "600px" : "1000px",
+        minHeight: "800px",
         transition: "width 0.3s ease",
+        "& > div": {
+            height: "100%",
+        },
         "& .ant-modal-content": {
-            height: 800,
+            height: "100%",
             "& .ant-modal-body": {
                 height: "100%",
             },
         },
-    },
+    }),
 }))
 
 const EvaluatorsModal = ({...props}: EvaluatorsModalProps) => {
-    const classes = useStyles()
     const appId = useAppId()
     const [current, setCurrent] = useState(0)
+    const [debugEvaluator, setDebugEvaluator] = useLocalStorage("isDebugSelectionOpen", false)
+    const classes = useStyles({current, debugEvaluator})
     const [evaluators, setEvaluators] = useAtom(evaluatorsAtom)
     const [evaluatorConfigs, setEvaluatorConfigs] = useAtom(evaluatorConfigsAtom)
     const [selectedEvaluator, setSelectedEvaluator] = useState<Evaluator | null>(null)
@@ -51,7 +61,6 @@ const EvaluatorsModal = ({...props}: EvaluatorsModalProps) => {
         "list",
     )
     const [selectedEvaluatorCategory, setSelectedEvaluatorCategory] = useState("view_all")
-    const [debugEvaluator, setDebugEvaluator] = useLocalStorage("isDebugSelectionOpen", false)
     const [selectedTestset, setSelectedTestset] = useState("")
 
     const evalConfigFetcher = () => {
@@ -159,14 +168,6 @@ const EvaluatorsModal = ({...props}: EvaluatorsModalProps) => {
     return (
         <Modal
             footer={null}
-            style={{
-                height: "95vh",
-                width: current === 2 && !debugEvaluator ? "600px" : "90vw",
-                maxWidth: "1800px",
-                maxHeight: "1100px",
-                minWidth: current === 2 && !debugEvaluator ? "600px" : "1200px",
-                minHeight: "800px",
-            }}
             closeIcon={null}
             title={null}
             className={classes.modalWrapper}

From 68ccb9892170f3edeee4632000468e794b1910f5 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 15 Nov 2024 06:11:04 +0100
Subject: [PATCH 4/5] fix(frontend): removed maxWidth and increased maxheight

---
 .../EvaluatorsModal/ConfigureEvaluator/index.tsx              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx
index dc07836d05..8145010c67 100644
--- a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx
+++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx
@@ -64,10 +64,10 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     formContainer: {
         display: "flex",
         flexDirection: "column",
-        maxWidth: 552,
         gap: theme.padding,
+        height: "100%",
         overflowY: "auto",
-        maxHeight: 580,
+        maxHeight: 650,
         "& .ant-form-item": {
             marginBottom: 0,
         },

From 0d02206bf3f28a0e22a44e6b72c4a9539da61ad6 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 21 Nov 2024 02:26:09 +0100
Subject: [PATCH 5/5] fix(frontend): added overflow scroll and removed
 maxHeight

---
 .../EvaluatorsModal/ConfigureEvaluator/index.tsx     | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx
index 8145010c67..511bd00a57 100644
--- a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx
+++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx
@@ -66,8 +66,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         flexDirection: "column",
         gap: theme.padding,
         height: "100%",
-        overflowY: "auto",
-        maxHeight: 650,
         "& .ant-form-item": {
             marginBottom: 0,
         },
@@ -202,7 +200,7 @@ const ConfigureEvaluator = ({
                 <Button onClick={handleOnCancel} type="text" icon={<CloseOutlined />} />
             </div>
 
-            <Flex gap={16} className="h-full">
+            <Flex gap={16} className="h-full overflow-y-hidden">
                 <div className="flex-1 flex flex-col gap-4">
                     <Space direction="vertical">
                         <Flex justify="space-between">
@@ -242,7 +240,7 @@ const ConfigureEvaluator = ({
                         </Typography.Text>
                     </Space>
 
-                    <div className="flex-1">
+                    <div className="flex-1 overflow-y-hidden">
                         <Form
                             requiredMark={false}
                             form={form}
@@ -267,7 +265,11 @@ const ConfigureEvaluator = ({
                             </Space>
 
                             {basicSettingsFields.length ? (
-                                <Space direction="vertical" size={4}>
+                                <Space
+                                    direction="vertical"
+                                    size={4}
+                                    className="flex-1 overflow-y-auto"
+                                >
                                     <Typography.Text className={classes.formTitleText}>
                                         Parameters
                                     </Typography.Text>