3 files changed, 18 insertions, 21 deletions

diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js
index 1cc6572..44a3e1b 100644
--- a/wikipedia/widgets/category_button.js
+++ b/wikipedia/widgets/category_button.js
@@ -15,7 +15,7 @@ const CATEGORY_BUTTON_BOTTOM_MARGIN = 20;  // pixels
 const CATEGORY_LABEL_BASELINE_CORRECTION = 0; // pixels
 const CATEGORY_BUTTON_BASELINE_CORRECTION = 10; // pixels
 const _HOVER_ARROW_URI = '/com/endlessm/wikipedia-domain/assets/category_hover_arrow.png';
-const MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE = 0.37;
+const CATEGORY_MIN_WIDTH = 120; // pixels
 
 GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE;
 
@@ -160,16 +160,12 @@ const CategoryButton = new Lang.Class({
 
     // OVERRIDES
 
+    // Sometimes our label content runs too long and the min window width can
+    // be greater than the screen width. So we provide our own min width for
+    // category buttons here, and allow the GtkLabels to be cut off
     vfunc_get_preferred_width: function() {
-        if(this._is_main_category) {
-            let toplevel = this.get_toplevel();
-            if(toplevel == null)
-                return this.parent();
-            let width = toplevel.get_allocated_width() * MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE;
-            return [width, width];
-        } else {
-            return this.parent();
-        }
+        let natural_width = this.parent()[1];
+        return [CATEGORY_MIN_WIDTH, natural_width];
     },
 
     // Reloads the pixbuf from the gresource at the proper size if necessary
diff --git a/wikipedia/widgets/category_layout_manager.js b/wikipedia/widgets/category_layout_manager.js
index d49661c..cb2f94a 100644
--- a/wikipedia/widgets/category_layout_manager.js
+++ b/wikipedia/widgets/category_layout_manager.js
@@ -1,6 +1,9 @@
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 
+const MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE = 37;
+const SUB_CATEGORY_SCREEN_WIDTH_PERCENTAGE = 30;
+
 const CategoryLayoutManager = new Lang.Class({
     Name: 'CategoryLayoutManager',
     Extends: Gtk.Grid,
@@ -8,8 +11,7 @@ const CategoryLayoutManager = new Lang.Class({
     _init: function(props) {
         props = props || {};
         props.row_homogeneous = true;
-        //we don't make the columns homogenous because the 0th column
-        //needs to be 37% of the screen, according to designs.
+        props.column_homogeneous = true;
         this.parent(props);
 
         this._childWidgets = [];
@@ -17,15 +19,16 @@ const CategoryLayoutManager = new Lang.Class({
     },
 
     // Distribute children in two columns, except for the last one if an odd
-    // number; that should span two columns
+    // number; that should span two columns. The width must be divided by
+    // percentage according to the spec, so we consider each column in the grid
+    // one percent
     _redistributeChildren: function() {
         let numChildren = this._childWidgets.length;
         let oddNumber = numChildren % 2 == 1;
 
         let numRows = 1;
-
         this._childWidgets.forEach(function(child, index) {
-            let column = (index % 2) + 1; //plus 1 because the mainWidget is the 0 column.
+            let column = (index % 2) * SUB_CATEGORY_SCREEN_WIDTH_PERCENTAGE + MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE;
             let row = Math.floor(index / 2);
 
             if(numRows < row + 1) 
@@ -33,20 +36,19 @@ const CategoryLayoutManager = new Lang.Class({
             //need when we add the main widget.
 
             if(child.get_parent() === this)
-                Gtk.Container.prototype.remove.call(this,
-                    this._childWidgets[index]);
+                Gtk.Container.prototype.remove.call(this, this._childWidgets[index]);
 
             if(oddNumber && index == numChildren - 1)
-                this.attach(child, 1, row, 2, 1);
+                this.attach(child, column, row, SUB_CATEGORY_SCREEN_WIDTH_PERCENTAGE * 2, 1);
             else
-                this.attach(child, column, row, 1, 1);
+                this.attach(child, column, row, SUB_CATEGORY_SCREEN_WIDTH_PERCENTAGE, 1);
         }, this);
 
         if(this._mainWidget) {
             if(this._mainWidget.get_parent() === this) {
                 Gtk.Container.prototype.remove.call(this, this._mainWidget);
             }
-            this.attach(this._mainWidget, 0, 0, 1, numRows);
+            this.attach(this._mainWidget, 0, 0, MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE, numRows);
         }
     },
 
diff --git a/wikipedia/widgets/category_selector_view.js b/wikipedia/widgets/category_selector_view.js
index 674e563..72eff07 100644
--- a/wikipedia/widgets/category_selector_view.js
+++ b/wikipedia/widgets/category_selector_view.js
@@ -39,7 +39,6 @@ const CategorySelectorView = new Lang.Class({
                 image_uri: category.image_thumbnail_uri,
                 clickable_category: category.has_articles,
                 is_main_category: category.is_main_category,
-                hexpand: !category.is_main_category
             });
             button.id = category.id; // ID to return to when clicked
             //if the category has no articles, you shouldn't be able to click on it.