ELEMENTS-1776: Backward port: fix column sort arrow and sequence numb…

…er overlap
nuxeo · Dec 17, 2024 · 416203f · 416203f
1 parent 7c8c3b4
commit 416203f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/ui/nuxeo-data-table/data-table-cell.js b/ui/nuxeo-data-table/data-table-cell.js
@@ -12,7 +12,8 @@ import './data-table-templatizer-behavior.js';
       return html`
         <style>
           :host {
-            flex: 1 0 100px;
+            flex: 1 0 120px;
+            flex-basis: 120px;
             padding: 0 24px;
             min-height: 48px;
             display: flex;

diff --git a/ui/nuxeo-data-table/data-table-column-sort.js b/ui/nuxeo-data-table/data-table-column-sort.js
@@ -51,7 +51,7 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior.js';
           }
         </style>
 
-        <div style="position: relative">
+        <div style="position: relative; width: 40px;">
           <paper-icon-button
             id="sortIcon"
             on-click="_sort"

diff --git a/ui/nuxeo-data-table/data-table-column.js b/ui/nuxeo-data-table/data-table-column.js
@@ -16,7 +16,15 @@ import './data-table-column-filter.js';
             role="columnheader"
           >
           </nuxeo-data-table-column-filter>
-          <div hidden$="[[column.filterBy]]" role="columnheader">[[column.name]]</div>
+          <div
+            title="[[column.name]]"
+            hidden$="[[column.filterBy]]"
+            role="columnheader"
+            style="flex: 1 1 70px; min-width: 70px;
+          max-width: 120px; overflow: hidden; text-overflow: ellipsis; text-align: start;"
+          >
+            [[column.name]]
+          </div>
         </template>
       `;
     }