From fdca27404cb37860ebf9aee8fd3774d630ae4be7 Mon Sep 17 00:00:00 2001
From: Alexandr <hellbeast92@gmail.com>
Date: Mon, 24 Aug 2026 11:37:32 +0200
Subject: [PATCH] MILAB-6690: align PlElementListItem head icons to top

---
 .changeset/element-list-item-icons-top.md     |  5 +++
 .../PlElementList/PlElementListItem.vue       | 32 ++++++++++++-------
 2 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/element-list-item-icons-top.md

diff --git a/.changeset/element-list-item-icons-top.md b/.changeset/element-list-item-icons-top.md
new file mode 100644
index 0000000000..a0588ac423
--- /dev/null
+++ b/.changeset/element-list-item-icons-top.md
@@ -0,0 +1,5 @@
+---
+"@milaboratories/uikit": patch
+---
+
+PlElementListItem: wrap drag handle and chevron into a single container aligned to the top of the head, so icons stay on the first title line with multiline titles
diff --git a/lib/ui/uikit/src/components/PlElementList/PlElementListItem.vue b/lib/ui/uikit/src/components/PlElementList/PlElementListItem.vue
index 705282732e..7df0cd0193 100644
--- a/lib/ui/uikit/src/components/PlElementList/PlElementListItem.vue
+++ b/lib/ui/uikit/src/components/PlElementList/PlElementListItem.vue
@@ -69,18 +69,20 @@ const emit = defineEmits<{
         ]"
         @click="isExpandable && emit('expand', props.item, props.index)"
       >
-        <div
-          v-if="props.showDragHandle"
-          :class="[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]"
-          :data-draggable="props.isDraggable"
-        >
-          <PlIcon16 name="drag-dots" />
+        <div v-if="props.showDragHandle || isExpandable" :class="$style.headIcons">
+          <div
+            v-if="props.showDragHandle"
+            :class="[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]"
+            :data-draggable="props.isDraggable"
+          >
+            <PlIcon16 name="drag-dots" />
+          </div>
+          <PlIcon16
+            v-if="isExpandable"
+            :class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]"
+            name="chevron-down"
+          />
         </div>
-        <PlIcon16
-          v-if="isExpandable"
-          :class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]"
-          name="chevron-down"
-        />
 
         <div :class="$style.title">
           <slot name="title" :item="props.item" :index="props.index" />
@@ -194,6 +196,14 @@ const emit = defineEmits<{
   background: var(--head-background);
 }
 
+.headIcons {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  height: 24px;
+  flex: 0 0 auto;
+}
+
 .contentChevron {
   display: block;
   width: 16px;