cr.ui.Grid: Consider padding to determine the number of columns in a row.

ui/webui/resources/js/cr/ui/grid.js

Index: ui/webui/resources/js/cr/ui/grid.js
diff --git a/ui/webui/resources/js/cr/ui/grid.js b/ui/webui/resources/js/cr/ui/grid.js
index 3d7f25f87f3cb7782f8f5432272e307d95c64206..6d7ba8c079193569de6a188abfdf7615305f3dcb 100644
--- a/ui/webui/resources/js/cr/ui/grid.js
+++ b/ui/webui/resources/js/cr/ui/grid.js
@@ -106,15 +106,22 @@ cr.define('cr.ui', function() {
       if (!itemCount)
         return 0;
 
-      var columns = Math.floor(this.clientWidthWithoutScrollbar_ / width);
+      var columns = Math.floor(
+          (this.clientWidthWithoutScrollbar_ - this.horizontalPadding_) /
+          width);
       if (!columns)
         return 0;
 
       var rows = Math.ceil(itemCount / columns);
-      if (rows * height <= this.clientHeight_)
+      if (rows * height <= this.clientHeight_) {
+        // Content fits within the client area (no scrollbar required).
         return columns;
+      }
 
-      return Math.floor(this.clientWidthWithScrollbar_ / width);
+      // If the content doesn't fit within the client area, the number of
+      // columns should be calculated with consideration for scrollbar's width.
+      return Math.floor(
+          (this.clientWidthWithScrollbar_ - this.horizontalPadding_) / width);
     },
 
     /**
@@ -125,10 +132,14 @@ cr.define('cr.ui', function() {
       // Check changings that may affect number of columns.
       var offsetWidth = this.offsetWidth;
       var offsetHeight = this.offsetHeight;
-      var overflowY = window.getComputedStyle(this).overflowY;
+      var style = window.getComputedStyle(this);
+      var overflowY = style.overflowY;
+      var horizontalPadding =
+          parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
 
       if (this.lastOffsetWidth_ == offsetWidth &&
-          this.lastOverflowY == overflowY) {
+          this.lastOverflowY == overflowY &&
+          this.horizontalPadding_ == horizontalPadding) {
         this.lastOffsetHeight_ = offsetHeight;
         return;
       }
@@ -136,6 +147,7 @@ cr.define('cr.ui', function() {
       this.lastOffsetWidth_ = offsetWidth;
       this.lastOffsetHeight_ = offsetHeight;
       this.lastOverflowY = overflowY;
+      this.horizontalPadding_ = horizontalPadding;
       this.columns_ = 0;
 
       if (overflowY == 'auto' && offsetWidth > 0) {