Dynamic table header width according to scrollbar (#3169)

Sizes the fixed table header of `NodeDetailsTable` width dynamically
depending on the content's scrollbar width. Makes sure the table header
cells align with the table body cells.

This also widens the "Parent PID" cell to make sure the text is not cut
off. Alternatively, could be renamed to "PPID".

Fixes #3158.

client/app/scripts/components/node-details/node-details-table.js

@@ -145,6 +145,7 @@ class NodeDetailsTable extends React.Component {
     this.onMouseLeaveRow = this.onMouseLeaveRow.bind(this);
     this.onMouseEnterRow = this.onMouseEnterRow.bind(this);
     this.saveTableContentRef = this.saveTableContentRef.bind(this);
+    this.saveTableHeadRef = this.saveTableHeadRef.bind(this);
     // Use debouncing to prevent event flooding when e.g. crossing fast with mouse cursor
     // over the whole table. That would be expensive as each focus causes table to rerender.
     this.debouncedFocusRow = debounce(this.focusRow, TABLE_ROW_FOCUS_DEBOUNCE_INTERVAL);
@@ -172,7 +173,7 @@ class NodeDetailsTable extends React.Component {
     this.focusState = {
       focusedNode: node,
       focusedRowIndex: rowIndex,
-      tableContentMinHeightConstraint: this.tableContent && this.tableContent.scrollHeight,
+      tableContentMinHeightConstraint: this.tableContentRef && this.tableContentRef.scrollHeight,
     };
   }
 
@@ -192,7 +193,11 @@ class NodeDetailsTable extends React.Component {
   }
 
   saveTableContentRef(ref) {
-    this.tableContent = ref;
+    this.tableContentRef = ref;
+  }
+
+  saveTableHeadRef(ref) {
+    this.tableHeadRef = ref;
   }
 
   getColumnHeaders() {
@@ -200,6 +205,11 @@ class NodeDetailsTable extends React.Component {
     return [{id: 'label', label: this.props.label}].concat(columns);
   }
 
+  componentDidMount() {
+    const scrollbarWidth = this.tableContentRef.offsetWidth - this.tableContentRef.clientWidth;
+    this.tableHeadRef.style.paddingRight = `${scrollbarWidth}px`;
+  }
+
   render() {
     const {
       nodeIdKey, columns, topologyId, onClickRow,
@@ -250,7 +260,7 @@ class NodeDetailsTable extends React.Component {
       <div className={className} style={this.props.style}>
         <div className="node-details-table-wrapper">
           <table className="node-details-table">
-            <thead>
+            <thead ref={this.saveTableHeadRef}>
               {this.props.nodes && this.props.nodes.length > 0 && <NodeDetailsTableHeaders
                 headers={headers}
                 sortedBy={sortedBy}

client/app/scripts/constants/styles.js

@@ -70,7 +70,7 @@ export const NODE_DETAILS_TABLE_COLUMN_WIDTHS = {
   open_files_count: NODE_DETAILS_TABLE_CW.M,
   pid: NODE_DETAILS_TABLE_CW.S,
   port: NODE_DETAILS_TABLE_CW.S,
-  ppid: NODE_DETAILS_TABLE_CW.S,
+  ppid: NODE_DETAILS_TABLE_CW.M, // Label "Parent PID" needs more space
   process_cpu_usage_percent: NODE_DETAILS_TABLE_CW.M,
   process_memory_usage_bytes: NODE_DETAILS_TABLE_CW.M,
   threads: NODE_DETAILS_TABLE_CW.M,

client/app/styles/_base.scss

@@ -1021,7 +1021,7 @@ a {
       padding: 0;
 
       .node-details-table-header-sortable {
-        padding: 3px 2px;
+        padding: 3px 4px;
         cursor: pointer;
       }
 
@@ -2067,13 +2067,6 @@ a {
       border-bottom: 1px solid $color-silver;
     }
 
-    thead {
-      // osx scrollbar width: 0
-      // linux scrollbar width: 16
-      // avg scrollbar width: 8
-      padding-right: 8px;
-    }
-
     thead, tbody tr {
       display: table;
       width: 100%;