Fixed display in compare executions

frontend/src/views/main/project/SuiteTestExecutionCard.vue

@@ -17,7 +17,7 @@
           </div>
       -->
       <div class='flex-grow-1'/>
-      <div v-if='result' :class='`d-flex flex-row align-center gap-8 test-${result.status.toLowerCase()}`'>
+      <div v-if='result' :class='`d-flex flex-row flex-wrap align-center gap-8 test-${result.status.toLowerCase()}`'>
                 <span v-if='result.metric' class='metric'>Measured <strong>Metric = {{
                     result.metric
                   }}</strong></span>
@@ -27,7 +27,7 @@
           <v-icon class='mr-1'>{{ TEST_RESULT_DATA[result.status].icon }}</v-icon>
           {{ TEST_RESULT_DATA[result.status].capitalized }}
         </v-chip>
-        <v-btn color="primary" @click="debugTest" outlined small :disabled="!canBeDebugged" :loading="loading">
+        <v-btn color='primary' @click='debugTest' outlined small :disabled='!canBeDebugged' :loading='loading'>
           <v-icon small>info</v-icon>
           Debug
         </v-btn>
@@ -84,21 +84,21 @@
 </template>
 
 <script lang='ts' setup>
-import {SuiteTestDTO, SuiteTestExecutionDTO} from '@/generated-sources';
-import {computed, ref} from 'vue';
-import {storeToRefs} from 'pinia';
-import {useCatalogStore} from '@/stores/catalog';
-import {$vfm} from 'vue-final-modal';
+import { SuiteTestDTO, SuiteTestExecutionDTO } from '@/generated-sources';
+import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useCatalogStore } from '@/stores/catalog';
+import { $vfm } from 'vue-final-modal';
 import SuiteTestInfoModal from '@/views/main/project/modals/SuiteTestInfoModal.vue';
-import {useTestSuiteStore} from '@/stores/test-suite';
-import {useDebuggingSessionsStore} from "@/stores/debugging-sessions";
+import { useTestSuiteStore } from '@/stores/test-suite';
+import { useDebuggingSessionsStore } from '@/stores/debugging-sessions';
 import ExecutionLogsModal from '@/views/main/project/modals/ExecutionLogsModal.vue';
 import mixpanel from 'mixpanel-browser';
-import {TEST_RESULT_DATA} from '@/utils/tests.utils';
-import {api} from "@/api";
-import router from "@/router";
-import ModelSelector from "@/views/main/utils/ModelSelector.vue";
-import {chain} from "lodash";
+import { TEST_RESULT_DATA } from '@/utils/tests.utils';
+import { api } from '@/api';
+import router from '@/router';
+import ModelSelector from '@/views/main/utils/ModelSelector.vue';
+import { chain } from 'lodash';
 
 const {slicingFunctionsByUuid, transformationFunctionsByUuid} = storeToRefs(useCatalogStore());
 const {models, datasets} = storeToRefs(useTestSuiteStore());

frontend/src/views/main/project/TestSuiteCompareExecutions.vue

@@ -1,14 +1,15 @@
 <template>
   <v-row no-gutters>
-    <v-col v-for="comparison in executionComparisons" :key="comparison.execution.id" class="pa-2" cols="6">
+    <v-col v-for='comparison in executionComparisons' :key='comparison.execution.id' class='pa-2' cols='12' md='6'
+           lg='4'>
       <v-card>
         <v-card-title>
-            <div class="d-flex flex-column align-left pb-4">
-                <span class="input-execution">Model: {{ getModel(comparison.execution) }}</span>
-                <span class="input-execution">Dataset: {{ getDataset(comparison.execution) }}</span>
-            </div>
-            <TestSuiteExecutionHeader :execution="comparison.execution" :tests="comparison.tests" compact
-                                      :try-mode="false"/>
+          <div class='d-flex flex-column align-left pb-4'>
+            <span class='input-execution'>Model: {{ getModel(comparison.execution) }}</span>
+            <span class='input-execution'>Dataset: {{ getDataset(comparison.execution) }}</span>
+          </div>
+          <TestSuiteExecutionHeader :execution='comparison.execution' :tests='comparison.tests' compact
+                                    :try-mode='false' />
         </v-card-title>
         <v-card-text>
           <SuiteTestExecutionList :tests="comparison.tests" compact is-past-execution />
@@ -20,27 +21,27 @@
 
 <script lang="ts" setup>
 
-import {SuiteTestDTO, SuiteTestExecutionDTO, TestFunctionDTO, TestSuiteExecutionDTO} from '@/generated-sources';
-import {computed, ComputedRef} from 'vue';
-import {storeToRefs} from 'pinia';
-import {useTestSuiteStore} from '@/stores/test-suite';
-import {useRoute} from 'vue-router/composables';
+import { SuiteTestDTO, SuiteTestExecutionDTO, TestFunctionDTO, TestSuiteExecutionDTO } from '@/generated-sources';
+import { computed, ComputedRef } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useTestSuiteStore } from '@/stores/test-suite';
+import { useRoute } from 'vue-router/composables';
 import SuiteTestExecutionList from '@/views/main/project/SuiteTestExecutionList.vue';
 import TestSuiteExecutionHeader from '@/views/main/project/TestSuiteExecutionHeader.vue';
-import {useCatalogStore} from "@/stores/catalog";
-import {chain} from 'lodash';
-import {TestsUtils} from "@/utils/tests.utils";
+import { useCatalogStore } from '@/stores/catalog';
+import { chain } from 'lodash';
+import { TestsUtils } from '@/utils/tests.utils';
 
-const {executions, models, datasets, inputs, suite, statusFilter, searchFilter} = storeToRefs(useTestSuiteStore());
-const {testFunctionsByUuid} = storeToRefs(useCatalogStore());
+const { executions, models, datasets, inputs, suite, statusFilter, searchFilter } = storeToRefs(useTestSuiteStore());
+const { testFunctionsByUuid } = storeToRefs(useCatalogStore());
 
 type ExecutionComparison = {
-    execution: TestSuiteExecutionDTO,
-    tests: {
-        suiteTest: SuiteTestDTO,
-        test: TestFunctionDTO,
-        result?: SuiteTestExecutionDTO
-    }[]
+  execution: TestSuiteExecutionDTO,
+  tests: {
+    suiteTest: SuiteTestDTO,
+    test: TestFunctionDTO,
+    result?: SuiteTestExecutionDTO
+  }[]
 }
 
 const route = useRoute();