How To: Resize Gmail's Label Column

A while ago, as part of Google trying to make Chrome more secure they decided to restrict the way that userscripts could be installed whereby now they have to be installed in the Extensions setting. Below you will find an updated step-by-step guide on how to install the resize gmail lable column javascript.

Note: This post has been updated March 2014.

I've recently been asked by some of our subscribers about the ability to resize the label column in Gmail in order to view some of their longer and highly nested labels. Fortunately for them as with all things Google there was an answer waiting to be found on the web.

I'm not sure why Google haven't implemented this themselves so that the label column is resized automatically
to fit the label width just like they have done in Google Drive.

Below is a script I came upon for Chrome and Firefox (might work for Safari, Opera and Inter Explorer as well) web browsers which adds two vertical dotted bars near the the label column which will allow you to resize the label column as required.

Please note it adds the two broken lines to the right of the label column (as shown in the above image) allowing a user to hover their mouse over and resize.

Update from March 2014

The process of adding the gmail label column resizer javascript has gotten a little more complex over the years due to Google's due dilegence with security however it still remains relatively easy. Once you have copied the code below into a text editor head over to the codecouch and copy the "full monty" code and paste it into the text editor after the line that reads "// Insert code here…"

Save the file to your desktop with a name that ends in “.user.js”, for example, “chromeGmailResizer.user.js”. Note: the “.user.js” extension is important as it tells Chrome that this code is to be installed as a user script.

Now navigate into your Chrome Extensions setting (either by typing "chrome://extensions" into the address bar, or by navigating the Chrome menu through "Settings", "Tools" then "Extensions" which will allow you to see a page similar to this.

Simply drag the file from your desktop over to your Chrome Extensions page which will prompt you to "Drop to install". 

Drop the file in the Extensions page and "Add" the Gmail label column resizer" when prompted by Chrome security.

// ==UserScript==
// @name Gmail label column resizer
// @namespace http://www.codecouch.com/
// @description User script that allows the labels column in Gmail to be 
// resized
// @include http://mail.google.com/*
// @include https://mail.google.com/*
// @match http://mail.google.com/*
// @match https://mail.google.com/*
// @version 1.2
// @history 1.2 Allow 10 seconds for the Gmail Greasemonkey API to load, 
// Chrome & GM userscripts now share same code
// @history 1.1 Stopped duplicate grab bars and added more URL matching
// @history 1.0 Initial version
// @grant none
// ==/UserScript==

var addGmailResizerToPage = function() {

  function loadGmailResizer() {
  // Insert code here...
  };

  // Test for the presence of the Gmail Greasemonkey API once per second. Give up   // if not present after 10 seconds
  var loadCount = 0;
  function testForGmonkey() {
    loadCount++;
    if (loadCount == 10) clearInterval(timerHandle);
    if (typeof(gmonkey) == 'object' && 'load' in gmonkey) {
      clearInterval(timerHandle);
      // Only load the resizer code if it hasn't already been run (stops 
      // multiple grab bars from appearing)
      if ('loadedGmailResizer' in top) return;
      top.loadedGmailResizer = true;
      loadGmailResizer();
    }
  };

  var timerHandle = setInterval(testForGmonkey, 1000);
};

s = document.createElement('script');
s.type = 'text/javascript';
s.textContent = '(' + addGmailResizerToPage.toString() + ')()';
document.body.appendChild(s);