How to Set Small Tab Size to Minimize Tab Scroll Buttons in Firefox

Question

Both Chrome and Firefox introduced the Search tabs list menu.

In my view, this completely negates the need for the (very annoying imo) tab-scrolling feature of Firefox (i.e. when you have what they deem to be too many tabs for the view, < and > buttons appear on the tab line so that you can scroll left and right).

I would like to disable that functionality. I don't want to "turn Firefox into Chrome", I prefer Firefox for many many other reasons, but I want to remove the annoyance of the < / > buttons (honestly, it's one of the reasons that puts me off Firefox more than any other - I just see no purpose for these buttons, and not being able to visually see all tabs from one view is annoying).

I found that if you go to about:config, you can then search for browser.tabs.tabMinWidth, and adjust the size. In an article from 5 or 6 years ago, it said you can reduce this to 0, but I found this impossible, and an article from 2019 said that it is limited to a minimum of 50 pixels. There is also this article from 11 years ago that is redundant with respect to modern Firefox.

Is there a way to disable the tab scroll left/right buttons < / > and/or reduce the tab pixel width to '0' or '1'?

Answer 1

1. type about:config into the address bar and then toolkit.legacyUserProfileCustomizations.stylesheets into the search on that page. Turn the setting from false to true.

2. Find your user profile folder by typing about:support in the address bar.

3. Edit/create chrome/userChrome.css in your profile and add these lines...

.tabbrowser-tab {
    min-width: initial !important;
}
.tab-content {
    overflow: hidden !important;
}

4. Restart Firefox

Answer 2

Had this same problem. The available solutions cause flickering where the tablist keeps trying to switch between scrolling and non-scrolling. Here's how I solved it:

1. In about:config set browser.tabs.tabMinWidth to 1.

2. Add this style to userChrome.css:

   .tabbrowser-tab:not([pinned]) {
     min-width: 1px !important;
   }
   

3. Install this user script:

   // ==UserScript==
   // @name            noTabScroll
   // @author          blackle
   // @include         main
   // @startup         UC.noTabScroll.exec(win);
   // @shutdown
   // @onlyonce
   // ==/UserScript==
   UC.noTabScroll = {
     exec: function (win) {
       let {customElements} = win;
   const old_on_underflow = customElements.get('arrowscrollbox').prototype.on_underflow;
   customElements.get('arrowscrollbox').prototype.on_underflow = function (e) {
     if (this.id === "tabbrowser-arrowscrollbox") {
       e.preventDefault();
       return;
     }
     old_on_underflow.call(this, e);
   };
   const old_on_overflow = customElements.get('arrowscrollbox').prototype.on_overflow;
   customElements.get('arrowscrollbox').prototype.on_overflow = function (e) {
     if (this.id === "tabbrowser-arrowscrollbox") {
       e.preventDefault();
       return;
     }
     old_on_overflow.call(this, e);
   };
   customElements.get('tabbrowser-tabs').prototype._initializeArrowScrollbox = function () {
     return;
   };
   
   },
   }
   

A more detailed guide is on this page: https://suricrasia.online/firefox/