From 4e4c294bb04b08f61d9919767bafb72992cef25a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Sat, 11 Apr 2026 08:42:50 +0200
Subject: [PATCH] Move the sortable icon of table column outside of the label

This ensure that the labels have the same height even if they are or not
sortable.

Closes #14762
---
 sao/src/sao.less     | 15 +++++++++------
 sao/src/view/tree.js | 10 +++++++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/sao/src/sao.less b/sao/src/sao.less
index 604e89a931..a81f96f827 100644
--- a/sao/src/sao.less
+++ b/sao/src/sao.less
@@ -919,14 +919,17 @@ img.icon {
                 cursor: pointer;
             }
 
-            > label {
-                display: inline-block;
+            > div {
+                display: flex;
                 overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                margin: 0;
-                vertical-align: bottom;
 
+                > label {
+                    margin: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    width: 100%;
+                }
             }
 
             > div.resizer {
diff --git a/sao/src/view/tree.js b/sao/src/view/tree.js
index f8b00abd19..66bf9300eb 100644
--- a/sao/src/view/tree.js
+++ b/sao/src/view/tree.js
@@ -212,9 +212,13 @@
                 });
                 th.uniqueId();
                 th.get(0).dataset.column = idx;
+                let header = jQuery('<div/>', {
+                    'class': 'header',
+                });
                 var label = jQuery('<label/>')
                     .text(column.attributes.string)
-                    .attr('title', column.attributes.string);
+                    .attr('title', column.attributes.string)
+                    .appendTo(header);
                 if (this.editable) {
                     if (column.attributes.required) {
                         label.addClass('required');
@@ -230,7 +234,7 @@
                     var arrow = jQuery('<img/>', {
                         'class': 'icon',
                     });
-                    label.append(arrow);
+                    header.append(arrow);
                     column.arrow = arrow;
                     th.click(column, (e) => {
                         if (is_resizing) {
@@ -241,7 +245,7 @@
                     });
                     th.addClass('sortable');
                 }
-                tr.append(th.append(label));
+                tr.append(th.append(header));
                 let resizer = jQuery('<div/>', {
                     'class': 'resizer',
                     'draggable': true,