Change Firefox tab width

One neat little feature in Chrome is the automatic shrinking of tabs when you open more and more tabs. But Firefox lacks this feature. What it does is create a scrollable tab strip after a certain number of tabs are open, which makes some tabs to go off the screen. This could get really annoying when you have a lot of tabs open. You will have to wait a long time to scroll back and forth through the tab list and sometimes it's annoying not being able to see all the open tabs within the screen.

Tab shrinking in Chrome 

In Firefox, by changing the minimum and maximum tab width you can customize it to behave the way you want. Prior to Firefox 4 this could be easily achieved by changing a couple of parameters in the about:config page. You can change the following two parameters to have any value you like. By setting the minimum value to 0, the tabs can be set to keep on shrinking while more and more tabs are opened.

browser.tabs.tabMinWidth (default value 100 pixels) 

browser.tabs.tabMaxWidth (default value 250 pixels)

But as discussed in this bug report the above preferences were removed in favor of CSS from Firefox 4 onwards. There are several methods to customize the tab width in newer versions of Firefox.

Method 1

The easiest way is to install the Custom Tab Width Firefox add-on. Just install it and set the width to any value through the add-on options.

Method 2

But if you are like me and do not like to install addons for every little customization done to the browser, then read on. In this method you have to use CSS to define the maximum and minimum tab width. One way to do this is by manually editing the userChrome.css file. To do this you have to first find your Firefox profile folder and look for the userChrome.css file inside the chrome folder. Then append the code given below to that file.

But the best way to do this is to use the Stylish addon. Stylish is a user styles manager. Most probably, you would already have Stylish installed. If not install stylish and then open the Firefox addons window. Now there will be a 'User Styles' section in there. In there click on the 'Write New Style' button. Give it any name you like and add the following code in the text field and click Save.

.tabbrowser-tab[fadein]:not([pinned]) {
min-width: 0px !important;
max-width: 250px !important;
}

With stylish you can edit, delete or enable/disable this feature any time you want. And you can see the changes instantly without restarting Firefox. If you directly edit the userChrome.css file then you have to restart Firefox to see the changes. 

Actually you can use the Stylish addon for anything which requires editing of the userChrome.css file. Also head over to userstyles.org to discover many other cool things you could do with Stylish.