Merge pull request #2246 from Agenta-AI/AGE-1011/-solve-size-modal-issue

(frontend)[AGE-1011]: Solve size modal issue
Agenta-AI · Nov 21, 2024 · 5e186e8 · 5e186e8
2 parents 4eb63bc + 786dd79
commit 5e186e8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/.../components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx b/.../components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx
@@ -64,10 +64,8 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     formContainer: {
         display: "flex",
         flexDirection: "column",
-        maxWidth: 552,
         gap: theme.padding,
-        overflowY: "auto",
-        maxHeight: 580,
+        height: "100%",
         "& .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>

diff --git a/...a-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx b/...a-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,7 +168,6 @@ const EvaluatorsModal = ({...props}: EvaluatorsModalProps) => {
     return (
         <Modal
             footer={null}
-            width={current === 2 && !debugEvaluator ? 600 : 1200}
             closeIcon={null}
             title={null}
             className={classes.modalWrapper}