From 1f7ec67e3cad933306f4a2bc866c3a122f2489cc Mon Sep 17 00:00:00 2001
From: "Matt J." <matthieu@probabl.ai>
Date: Mon, 20 Jan 2025 15:42:12 +0100
Subject: [PATCH] feat(UI): Cross validation report primary results
 responsivness (#1165)

Closes #1165

Cross validation report primary results are now more responsive.

preview:


https://github.com/user-attachments/assets/94dd9e35-7abf-4c41-a86c-59a2adcbd821
---
 .../CrossValidationReportResults.vue          | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/skore-ui/src/components/CrossValidationReportResults.vue b/skore-ui/src/components/CrossValidationReportResults.vue
index b8be3e34f..53b521ac0 100644
--- a/skore-ui/src/components/CrossValidationReportResults.vue
+++ b/skore-ui/src/components/CrossValidationReportResults.vue
@@ -137,7 +137,7 @@ function isNameTooltipEnabled(index: number) {
     border-bottom: solid var(--stroke-width-md) var(--color-stroke-background-primary);
     background-color: var(--color-stroke-background-primary);
     gap: 1px;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(var(--nb-scalar-columns, 2), 1fr);
 
     &:last-child {
       border-right: none;
@@ -202,8 +202,11 @@ function isNameTooltipEnabled(index: number) {
       padding: var(--spacing-16) var(--spacing-10);
 
       & .name {
+        overflow: hidden;
         color: var(--color-text-primary);
         font-size: var(--font-size-sm);
+        text-overflow: ellipsis;
+        white-space: nowrap;
 
         & .icon {
           color: var(--color-text-branding);
@@ -212,8 +215,15 @@ function isNameTooltipEnabled(index: number) {
       }
 
       & .dropdown {
+        flex: 0 1 40%;
+
         & button {
           padding: var(--spacing-6) var(--spacing-10);
+
+          & .label {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
         }
       }
     }
@@ -301,4 +311,16 @@ function isNameTooltipEnabled(index: number) {
     }
   }
 }
+
+@media screen and (width >= 801px) {
+  .cross-validation-report-result {
+    --nb-scalar-columns: 3;
+  }
+}
+
+@media screen and (width >= 1025px) {
+  .cross-validation-report-result {
+    --nb-scalar-columns: 5;
+  }
+}
 </style>