fix (CSS): Minor CSS fix for performance overview tab.

Signed-off-by: Kshitij Fadnis <cool.kshij@gmail.com>

src/components/filters/Filters.module.scss

@@ -44,7 +44,7 @@
 }
 
 .container {
-  margin: 0 0 $spacing-03 $spacing-05;
+  margin: 0 $spacing-05 $spacing-03;
   display: none;
   box-shadow: 0 0 5px 2px $gray-40;
 }
@@ -52,7 +52,7 @@
 .filters {
   padding: $spacing-05;
   display: flex;
-  align-items: baseline;
+  align-items: flex-start;
   column-gap: $spacing-09;
 }
 

src/views/performance-overview/Hide.module.scss

@@ -44,7 +44,7 @@
 }
 
 .container {
-  margin: 0 0 $spacing-03 $spacing-05;
+  margin: 0 $spacing-05 $spacing-03;
   padding: $spacing-05;
   display: none;
   column-gap: $spacing-12;

src/views/performance-overview/PerformanceOverview.module.scss

@@ -45,13 +45,17 @@
 }
 
 .column {
-  max-width: 100%;
+  max-width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   row-gap: $spacing-03;
 }
 
+.expand {
+  max-width: 100%;
+}
+
 .seperator {
   border: 1px dotted var(--cds-border-inverse);
   margin: 0 $spacing-03;

src/views/performance-overview/PerformanceOverview.tsx

@@ -768,7 +768,12 @@ export default function PerformanceOverview({
         )}
       >
         {humanMetricsInData.size ? (
-          <div className={classes.column}>
+          <div
+            className={cx(
+              classes.column,
+              algorithmicmetricsInData.size === 0 ? classes.expand : null,
+            )}
+          >
             <h4>
               Human Evaluations ({numSelectedTasks}/{numTasks})
             </h4>
@@ -904,7 +909,12 @@ export default function PerformanceOverview({
           <div className={classes.seperator}></div>
         ) : null}
         {algorithmicmetricsInData.size ? (
-          <div className={classes.column}>
+          <div
+            className={cx(
+              classes.column,
+              humanMetricsInData.size === 0 ? classes.expand : null,
+            )}
+          >
             <h4>
               Algorithmic Evaluations ({numSelectedTasks}/{numTasks})
             </h4>