fix(ui): Custom Dashboard name overflows. (#7124)

* fix(ui): Custom Dashboard name overflows. * fix(ui): avoid dashboard button being too long --------- Co-authored-by: YannC <[email protected]>
kestra-io · Feb 3, 2025 · fcfee51 · fcfee51
1 parent 3f2d910
commit fcfee51
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/ui/src/components/filter/KestraFilter.vue b/ui/src/components/filter/KestraFilter.vue
@@ -835,6 +835,7 @@ $dashboards: 52px;
         }
 
         &.dashboards {
+            min-width: $dashboards;
             max-width: calc(100% - $included - $dashboards);
         }
     }
@@ -872,6 +873,7 @@ $dashboards: 52px;
 .filters-select {
     & .el-select-dropdown {
         width: auto !important;
+        max-width: 300px;
 
         &:has(.el-select-dropdown__empty) {
             width: auto !important;

diff --git a/ui/src/components/filter/segments/Dashboards.vue b/ui/src/components/filter/segments/Dashboards.vue
@@ -1,8 +1,8 @@
 <template>
     <el-dropdown trigger="click" placement="bottom-end">
         <KestraIcon placement="bottom">
-            <el-button :icon="Menu">
-                {{ selectedDashboard ?? $t('default_dashboard') }}
+            <el-button :icon="Menu" class="main-button d-inline">
+                <span class="text-truncate">{{ selectedDashboard ?? $t('default_dashboard') }}</span>
             </el-button>
         </KestraIcon>
 
@@ -141,4 +141,12 @@
 .items {
     max-height: 160px !important; // 5 visible items
 }
+
+.main-button {
+    max-width: 300px;
+
+    span {
+        max-width: 250px;
+    }
+}
 </style>