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

@@ -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 {

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,