From db18a659c067ff6febaf725d7c44e47db398f5c8 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 17 Jun 2024 17:51:36 +0100
Subject: [PATCH] fix(frontend): human eval inputs overflowing when values are
 long

---
 .../ABTestingEvaluationTable.tsx              |  1 +
 .../SingleModelEvaluationTable.tsx            |  1 +
 .../Playground/ParamsForm/ParamsForm.tsx      | 38 +++++++++----------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index 8f209da49..1ea3f3270 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -374,6 +374,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                     </div>
                 </div>
             ),
+            width: 300,
             dataIndex: "inputs",
             render: (_: any, record: ABTestingEvaluationTableRow, rowIndex: number) => {
                 return (
diff --git a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
index e6af1b516..b008f76ff 100644
--- a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
@@ -417,6 +417,7 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
                     </div>
                 </div>
             ),
+            width: 300,
             dataIndex: "inputs",
             render: (_: any, record: SingleModelEvaluationRow, rowIndex: number) => {
                 return (
diff --git a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
index b213497e9..53ad10678 100644
--- a/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
+++ b/agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx
@@ -28,12 +28,11 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         borderRadius: 6,
     },
     paramValueContainer: {
-        border: `1px solid ${theme.colorBorder}`,
-        width: "100%",
-        borderRadius: theme.borderRadius,
-        padding: theme.paddingSM,
-        maxHeight: 300,
-        overflowY: "scroll",
+        "&:disabled": {
+            color: "inherit",
+            backgroundColor: "inherit",
+            cursor: "text",
+        },
     },
 }))
 
@@ -109,20 +108,19 @@ const ParamsForm: React.FC<Props> = ({
                                             alt={param.name}
                                         />
                                     )}
-                                {isPlaygroundComponent ? (
-                                    <Input.TextArea
-                                        data-cy={`testview-input-parameters-${index}`}
-                                        key={index}
-                                        value={param.value}
-                                        placeholder={`${renameVariables(param.name)} (${type})`}
-                                        onChange={(e) =>
-                                            onParamChange?.(param.name, e.target.value)
-                                        }
-                                        autoSize={{minRows: 2, maxRows: 8}}
-                                    />
-                                ) : (
-                                    <div className={classes.paramValueContainer}>{param.value}</div>
-                                )}
+
+                                <Input.TextArea
+                                    data-cy={`testview-input-parameters-${index}`}
+                                    key={index}
+                                    className={
+                                        !isPlaygroundComponent ? classes.paramValueContainer : ""
+                                    }
+                                    value={param.value}
+                                    placeholder={`${renameVariables(param.name)} (${type})`}
+                                    onChange={(e) => onParamChange?.(param.name, e.target.value)}
+                                    disabled={!isPlaygroundComponent}
+                                    autoSize={{minRows: 2, maxRows: 8}}
+                                />
                             </div>
                         </Form.Item>
                     )