From 8d58147d663331c43cecf7218a79b50ce8917d16 Mon Sep 17 00:00:00 2001
From: Alina D <alina.dvornyk@vates.tech>
Date: Tue, 28 Jul 2026 09:53:07 +0200
Subject: [PATCH] feat(xo6): align vertically all hosts in Treeview (#10153)

---
 .../ui/tree-item-label/UiTreeItemLabel.vue    | 48 +++++++++++++------
 CHANGELOG.unreleased.md                       |  2 +
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/@xen-orchestra/web-core/lib/components/ui/tree-item-label/UiTreeItemLabel.vue b/@xen-orchestra/web-core/lib/components/ui/tree-item-label/UiTreeItemLabel.vue
index 00a649ef81..b22a929637 100644
--- a/@xen-orchestra/web-core/lib/components/ui/tree-item-label/UiTreeItemLabel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/tree-item-label/UiTreeItemLabel.vue
@@ -9,17 +9,19 @@
       <template v-if="depth > 1">
         <VtsTreeLine v-for="i in depth - 1" :key="i" />
       </template>
-      <UiButtonIcon
-        v-if="hasToggle"
-        v-tooltip="isExpanded ? t('action:close') : t('action:open')"
-        class="toggle"
-        accent="brand"
-        :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'"
-        size="small"
-        :target-scale="{ x: 1.5, y: 2 }"
-        @click="emit('toggle')"
-      />
-      <div v-else class="h-line" />
+      <div class="toggle-wrapper">
+        <UiButtonIcon
+          v-if="hasToggle"
+          v-tooltip="isExpanded ? t('action:close') : t('action:open')"
+          class="toggle"
+          accent="brand"
+          :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'"
+          size="small"
+          :target-scale="{ x: 1.5, y: 2 }"
+          @click="emit('toggle')"
+        />
+        <div v-else class="h-line" />
+      </div>
       <a :href class="link typo-body-bold-small" @click="navigate">
         <slot name="icon">
           <VtsIcon :name="icon" size="medium" class="icon" />
@@ -28,7 +30,9 @@
           <slot />
         </div>
       </a>
-      <slot name="addons" />
+      <div class="addons-wrapper">
+        <slot name="addons" />
+      </div>
     </div>
   </RouterLink>
 </template>
@@ -86,6 +90,13 @@ const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
   padding: 0 0.8rem;
   margin-bottom: 0.2rem;
 
+  .toggle-wrapper {
+    width: 2.4rem;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+
   .link {
     display: flex;
     align-items: center;
@@ -108,10 +119,19 @@ const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
   .icon {
     font-size: 1.6rem;
   }
+  .addons-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-shrink: 0;
+  }
+
+  .toggle {
+    width: 100%;
+  }
 
   .h-line {
-    width: 2rem;
-    margin-left: -0.4rem;
+    width: 100%;
   }
 
   /* INTERACTION VARIANTS */
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index 555614bd6b..14d109db7b 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -11,6 +11,8 @@
 
 > Users must be able to say: "Nice enhancement, I'm eager to test it"
 
+- [XO6/Treeview] Fix hosts alignment in Treeview when hosts have different numbers of VMs (PR [#10153](https://github.com/vatesfr/xen-orchestra/pull/10153))
+
 ### Bug fixes
 
 > Users must be able to say: "I had this issue, happy to know it's fixed"