fix(Grid): Adjust available width for columns

With the newer native scrollbar changes we need to subtract the scrollbar
width from the available width used to render the columns, otherwise the
viewport contents will overflow the visible area and cause the viewport to
scroll horizontally when we don't want it to.

Thanks to @dczepierga for tracking down the cause and solution.

Fixes #2521, #2734, #2592

Author: c0bra

Diff for: src/features/resize-columns/less/column-resizer.less

@@ -16,6 +16,22 @@
   }
 }
 
+// Add a visual border for final column's resizer element
+.ui-grid-header-cell:last-child .ui-grid-column-resizer.right {
+  border-right: @gridBorderWidth solid @borderColor;
+}
+
+// Put visual border on left of last header cell when direction is rtl
+.ui-grid[dir=rtl]  .ui-grid-header-cell:last-child {
+  .ui-grid-column-resizer.right {
+    border-right: 0;
+  }
+
+  .ui-grid-column-resizer.left {
+    border-left: @gridBorderWidth solid @borderColor;
+  }
+}
+
 .ui-grid {
   &.column-resizing {
     cursor: col-resize;

Diff for: src/js/core/directives/ui-grid-header.js

@@ -72,7 +72,7 @@
 
             function updateColumnWidths() {
               // Get the width of the viewport
-              var availableWidth = containerCtrl.colContainer.getViewportWidth();
+              var availableWidth = containerCtrl.colContainer.getViewportWidth() - grid.scrollbarWidth;
 
               //if (typeof(uiGridCtrl.grid.verticalScrollbarWidth) !== 'undefined' && uiGridCtrl.grid.verticalScrollbarWidth !== undefined && uiGridCtrl.grid.verticalScrollbarWidth > 0) {
               //  availableWidth = availableWidth + uiGridCtrl.grid.verticalScrollbarWidth;

Diff for: src/js/core/factories/GridRenderContainer.js

@@ -545,7 +545,7 @@ angular.module('ui.grid')
         totalWidth = 0;
 
     // Get the width of the viewport
-    var availableWidth = self.getViewportWidth();
+    var availableWidth = self.getViewportWidth() - self.grid.scrollbarWidth;
 
     //if (typeof(self.grid.verticalScrollbarWidth) !== 'undefined' && self.grid.verticalScrollbarWidth !== undefined && self.grid.verticalScrollbarWidth > 0) {
     //  availableWidth = availableWidth + self.grid.verticalScrollbarWidth;

Diff for: src/less/cell.less

@@ -11,7 +11,7 @@
   box-sizing: border-box;
 
   &:last-child {
-    // border-right: 0;
+    border-right: 0;
   }
 }
 

Diff for: src/less/header.less

@@ -55,6 +55,10 @@
   border-right: @gridBorderWidth solid;
   border-color: @headerVerticalBarColor;
 
+  &:last-child {
+    border-right: 0;
+  }
+
   .user-select(none);
 
   // Default to width 0 so header height can calculate right. Otherwise

Diff for: src/less/rtl.less

@@ -24,8 +24,8 @@
   }
 
   .ui-grid-cell:last-child, .ui-grid-header-cell:last-child  {
-    border-left: @gridBorderWidth solid;
-    border-color: @borderColor;
+    border-right: @gridBorderWidth solid @borderColor;
+    border-left: 0;
   }
 
   .ui-grid-header-cell:first-child .ui-grid-vertical-bar,

Diff for: test/unit/core/directives/ui-grid.spec.js

@@ -118,7 +118,7 @@ describe('ui-grid', function() {
         renderWidth += c.drawnWidth;
       });
 
-      expect(renderWidth).toBe(gridApi.grid.gridWidth);
+      expect(renderWidth).toBe(gridApi.grid.getViewportWidth() - gridApi.grid.scrollbarWidth);
     });
   });