chore(core): properly handle dashboard header button on small screens

Closes https://github.com/kestra-io/kestra/issues/13838.
2025-12-30 03:00:23 -05:00 · 2025-12-30 08:56:26 +01:00
1 changed files with 6 additions and 3 deletions
--- a/ui/src/components/dashboard/components/selector/Selector.vue
+++ b/ui/src/components/dashboard/components/selector/Selector.vue
@@ -1,7 +1,7 @@
 <template>
    <el-dropdown trigger="click" hideOnClick placement="bottom-end">
-        <el-button :icon="Menu" class="selected">
-            <span class="text-truncate">
+        <el-button :icon="ChartLineVariant" class="selected">
+            <span v-if="!verticalLayout" class="text-truncate">
                {{ selected ?? t("dashboards.default") }}
            </span>
        </el-button>
@@ -75,7 +75,10 @@

    import Item from "./Item.vue";

-    import Menu from "vue-material-design-icons/Menu.vue";
+    import {useBreakpoints, breakpointsElement} from "@vueuse/core";
+    const verticalLayout = useBreakpoints(breakpointsElement).smallerOrEqual("sm");
+
+    import ChartLineVariant from "vue-material-design-icons/ChartLineVariant.vue";
    import Plus from "vue-material-design-icons/Plus.vue";
    import Magnify from "vue-material-design-icons/Magnify.vue";