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

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;

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;

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;

src/less/cell.less

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

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

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,

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);
     });
   });