From 234600fecee4aea598144365e5d9ed29a2f88582 Mon Sep 17 00:00:00 2001
From: Akrem Abayed <aakrem@users.noreply.github.com>
Date: Tue, 2 Apr 2024 15:25:06 +0200
Subject: [PATCH] make model param full width

---
 .../Playground/Views/ParametersCards.tsx      | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/agenta-web/src/components/Playground/Views/ParametersCards.tsx b/agenta-web/src/components/Playground/Views/ParametersCards.tsx
index 81946991fa..4ab508f091 100644
--- a/agenta-web/src/components/Playground/Views/ParametersCards.tsx
+++ b/agenta-web/src/components/Playground/Views/ParametersCards.tsx
@@ -80,20 +80,23 @@ interface GroupedSelectProps {
     handleChange: (value: string) => void
 }
 
-const GroupedSelect: React.FC<GroupedSelectProps> = ({choices, defaultValue, handleChange}) => (
-    <Select
-        defaultValue={defaultValue}
-        style={{width: 200}}
-        onChange={handleChange}
-        options={Object.entries(choices).map(([groupLabel, groupChoices]) => ({
-            label: groupLabel,
-            options: groupChoices.map((choice) => ({
-                label: choice,
-                value: choice,
-            })),
-        }))}
-    />
-)
+const GroupedSelect: React.FC<GroupedSelectProps> = ({choices, defaultValue, handleChange}) => {
+    const classes = useStyles()
+    return (
+        <Select
+            defaultValue={defaultValue}
+            className={classes.select}
+            onChange={handleChange}
+            options={Object.entries(choices).map(([groupLabel, groupChoices]) => ({
+                label: groupLabel,
+                options: groupChoices.map((choice) => ({
+                    label: choice,
+                    value: choice,
+                })),
+            }))}
+        />
+    )
+}
 
 interface ModelParametersProps {
     optParams: Parameter[] | null