Show all column headers in full by default (#7168)

* ui: Let the name of the last column to expand to its full width

This is meant to improve the UX in two situations:
* if the grid is narrower than the screen, then it makes little sense to
  cut off the last column name because there is free space afterwards,
  so better let it expand
* if the grid is wider than the screen, then it is impossible to drag
  the edge of the last column to the right, since there is no space on
  the right. So better have the column expanded to show the full column
  name too.

* ui: Add padding to the grid to make it possible to resize the last column

Closes #7167.

* Switch to showing full column names by default

Author: wetneb

main/webapp/modules/core/scripts/views/data-table/data-table-view.js

@@ -105,6 +105,9 @@ DataTableView.prototype._startResizing = function(columnIndex, clickEvent) {
   // for conversion from px to em
   state.emFactor = parseFloat(getComputedStyle($(".data-table-container colgroup")[0]).fontSize);
 
+  state.col.width(state.originalWidth);
+  columnHeader._td.classList.add('resized-column');
+
   $('body')
       .on('mousemove', DataTableView.mouseMoveListener)
       .on('mouseup', DataTableView.mouseReleaseListener);

main/webapp/modules/core/styles/views/data-table-view.css

@@ -109,6 +109,7 @@ div.viewpanel-pagesize span:first-of-type {
   font-size: 1.05em;
   border-collapse: separate;
   width: max-content;
+  padding-right: 3em;
 }
 
 .data-table td, .data-table-header td, .data-table-header th {
@@ -203,6 +204,10 @@ table.data-table td.column-header, table.data-table th.column-header {
 .column-header-name {
   padding: 4px 0 0 0;
   display: inline-block;
+  position: initial;
+}
+
+th.resized-column .column-header-name {
   position: absolute;
 }
 
@@ -217,6 +222,7 @@ table.data-table td.column-header, table.data-table th.column-header {
   border: none;
   padding: 0;
   background-color: transparent;
+  vertical-align: top;
 }
 
 .column-header-menu-expand {