tweak

ui/src/components/flows/TriggerAvatar.vue

@@ -3,15 +3,17 @@
         <span v-for="trigger in triggers" :key="uid(trigger)" :id="uid(trigger)">
             <template v-if="trigger.disabled === undefined || trigger.disabled === false">
                 <el-popover
+                    :ref="(el: any) => setPopoverRef(el, trigger)"
                     placement="left"
                     :persistent="true"
                     :title="`${$t('trigger details')}: ${trigger ? trigger.id : ''}`"
                     :width="500"
                     transition=""
                     :hideAfter="0"
+                    @show="handlePopoverShow"
                 >
                     <template #reference>
-                        <el-button @click="copyLink(trigger)" size="small">
+                        <el-button class="trigger-icon" @click="copyLink(trigger)" size="small">
                             <TaskIcon :onlyIcon="true" :cls="trigger?.type" :icons="pluginsStore.icons" />
                         </el-button>
                     </template>
@@ -24,7 +26,7 @@
     </div>
 </template>
 <script setup lang="ts">
-    import {computed} from "vue";
+    import {computed, ref, nextTick} from "vue";
     import {useRoute} from "vue-router";
     import {usePluginsStore} from "../../stores/plugins";
     import Utils from "../../utils/utils";
@@ -61,6 +63,8 @@
     const pluginsStore = usePluginsStore();
     const route = useRoute();
 
+    const popoverRefs = ref<Map<string, any>>(new Map());
+
     const triggers = computed<Trigger[]>(() => {
         if (props.flow && props.flow.triggers) {
             return props.flow.triggers.filter(
@@ -77,6 +81,22 @@
         return (props.flow ? props.flow.namespace + "-" + props.flow.id : props.execution?.id) + "-" + trigger.id;
     }
 
+    function setPopoverRef(el: any, trigger: Trigger) {
+        if (el) {
+            popoverRefs.value.set(uid(trigger), el);
+        }
+    }
+
+    function handlePopoverShow() {
+        nextTick(() => {
+            popoverRefs.value.forEach((popover) => {
+                if (popover?.popperRef?.popperInstanceRef) {
+                    popover.popperRef.popperInstanceRef.update();
+                }
+            });
+        });
+    }
+
     const {t} = useI18n();
     const toast = useToast();
 
@@ -99,12 +119,18 @@
 <style scoped lang="scss">
     .trigger {
         max-width: 180px;
-        overflow-x: auto;
+        display: flex;
+        justify-content: center;
     }
 
-    .el-button {
+    .trigger-icon {
         display: inline-flex !important;
+        align-items: center;
         margin-right: .25rem;
+        border: none;
+        background-color: transparent;
+        padding: 2px;
+        cursor: default;
     }
 
     :deep(div.wrapper) {