Merge pull request #2027 from Agenta-AI/fix/small-ui-issues

Fix: small UI issues in overview page
Agenta-AI · Sep 9, 2024 · 6f1c87b · 6f1c87b
2 parents 58b69bc + dafef16
commit 6f1c87b
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 13 deletions.
diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -92,6 +92,8 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
     menuItem: {
         textOverflow: "initial !important",
+        display: "flex !important",
+        alignItems: "center",
     },
     avatarContainer: {
         display: "flex",
@@ -113,6 +115,9 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     menuHeader: {
         padding: `${theme.paddingXS}px ${theme.padding}px`,
         color: theme.colorTextDescription,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
     },
 }))
 

diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -33,32 +33,35 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         },
     },
     statFlag: {
+        lineHeight: theme.lineHeight,
         "& .ant-statistic-content-value": {
-            fontSize: 16,
+            fontSize: theme.fontSize,
             color: theme.colorError,
         },
         "& .ant-statistic-content-suffix": {
-            fontSize: 16,
+            fontSize: theme.fontSize,
             color: theme.colorError,
         },
     },
     stat: {
+        lineHeight: theme.lineHeight,
         "& .ant-statistic-content-value": {
-            fontSize: 16,
+            fontSize: theme.fontSize,
             color: theme.colorPrimary,
         },
         "& .ant-statistic-content-suffix": {
-            fontSize: 16,
+            fontSize: theme.fontSize,
             color: theme.colorPrimary,
         },
     },
     statGood: {
+        lineHeight: theme.lineHeight,
         "& .ant-statistic-content-value": {
-            fontSize: 16,
+            fontSize: theme.fontSize,
             color: theme.colorSuccess,
         },
         "& .ant-statistic-content-suffix": {
-            fontSize: 16,
+            fontSize: theme.fontSize,
             color: theme.colorSuccess,
         },
     },

diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -253,7 +253,7 @@ const AutomaticEvalOverview = () => {
                                 <Popover
                                     key={index}
                                     placement="bottom"
-                                    trigger={"click"}
+                                    trigger={"hover"}
                                     arrow={false}
                                     content={
                                         <div className="w-[256px]">
@@ -274,7 +274,7 @@ const AutomaticEvalOverview = () => {
                                 <Popover
                                     key={index}
                                     placement="bottom"
-                                    trigger={"click"}
+                                    trigger={"hover"}
                                     arrow={false}
                                     content={
                                         <div

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -30,7 +30,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
     cardContainer: {
         display: "flex",
-        gap: theme.paddingXS,
+        gap: theme.padding,
         "& .ant-card": {
             width: "100%",
             position: "relative",
@@ -156,7 +156,10 @@ const DeploymentOverview = ({
                                         env={env}
                                     />
                                 ) : (
-                                    <Tag className="w-fit" onClick={(e) => e.stopPropagation()}>
+                                    <Tag
+                                        className="w-fit py-[1px] px-2"
+                                        onClick={(e) => e.stopPropagation()}
+                                    >
                                         No deployment
                                     </Tag>
                                 )}

diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -33,12 +33,13 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         },
     },
     stat: {
+        lineHeight: theme.lineHeight,
         "& .ant-statistic-content-value": {
-            fontSize: 16,
+            fontSize: theme.fontSize,
             color: theme.colorPrimary,
         },
         "& .ant-statistic-content-suffix": {
-            fontSize: 16,
+            fontSize: theme.fontSize,
             color: theme.colorPrimary,
         },
     },

diff --git a/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx b/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
@@ -58,7 +58,10 @@ const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopover
                 </div>
             }
         >
-            <Tag className="w-fit cursor-pointer" onClick={(e) => e.stopPropagation()}>
+            <Tag
+                className="w-fit cursor-pointer py-[1px] px-2"
+                onClick={(e) => e.stopPropagation()}
+            >
                 <Badge
                     color={token.colorPrimary}
                     text={formatVariantIdWithHash(env.deployed_app_variant_id as string)}