From daccb6648ddec139838d0aef6ee7fb6d5547e6bb Mon Sep 17 00:00:00 2001
From: Roland Schilter <roli@schilter.me>
Date: Fri, 11 May 2018 13:26:45 -0700
Subject: [PATCH] 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.
---
 .../node-details/node-details-table.js           | 16 +++++++++++++---
 client/app/scripts/constants/styles.js           |  2 +-
 client/app/styles/_base.scss                     |  9 +--------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/client/app/scripts/components/node-details/node-details-table.js b/client/app/scripts/components/node-details/node-details-table.js
index 0bd1109dd..bb5ca3307 100644
--- a/client/app/scripts/components/node-details/node-details-table.js
+++ b/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}
diff --git a/client/app/scripts/constants/styles.js b/client/app/scripts/constants/styles.js
index 7c1c904d7..dec08f0cb 100644
--- a/client/app/scripts/constants/styles.js
+++ b/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,
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index d041e5f4a..62c06fce8 100644
--- a/client/app/styles/_base.scss
+++ b/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%;