Multi row tabs - how can I change the max tab width?

[No Expert]

Hi,

I'm using the following code in my userChrome.css to get multi row tabs:

Code: Select all

.tabbrowser-tabs .tabbrowser-arrowscrollbox,
.tabbrowser-tabs .tabbrowser-arrowscrollbox > scrollbox,
.tabbrowser-tabs .tabbrowser-arrowscrollbox > scrollbox > box
{
  display: block !important;
}

The issue is that once I do that then the tabs no longer respect the default maximum tab with.
For instance, I've tried adding this:

Code: Select all

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

But the max-width is always ignored.

This issue was also mentioned here:
http://forums.mozillazine.org/viewtopic ... 20#p980820

I realise I can do this with TMP, but as I only this this functionality and nothing else, I don't want to add yet another extension for what should be a simple fix.

Any ideas?

Thanks

[Reflective]

Install Classic Theme Restorer which allows you to change the tab width. Here's a pix of my own settings: https://i.imgur.com/pgQnkJW.png

Incidentally, I noticed you're still on FF54 so make a backup of your current profile before upgrading to 55.0.2. That allows you to install Firefox ESR which will support legacy extensions like CTR until June 26 next year.

[No Expert]

Reflective, thanks for your reply.
I was hoping to do it without an extension, only because I have so many, I feel like I should be reducing them!

Not sure whether this requires a script ,altough it should be very much achievable through CSS I would think.

I see this in the guts of TMP:

Code: Select all

gBrowser.tabContainer.mTabMaxWidth = tabMaxWidth;
gBrowser.tabContainer.mTabMinWidth = tabMinWidth;

If you have any ideas, appreciated.

[Happy112]

I was hoping to do it without an extension, only because I have so many, I feel like I should be reducing them

So sorry to come up with yet another add-on, but this one will put a smile on your face (I hope .... ) :

https://addons.mozilla.org/en-US/firefo ... tab-width/

[No Expert]

Happy112, so sorry to say this: I've already tried that extension and yes, you are right it does increase the tab width.
But it does not reduce the width as more tabs are added to the row.

If you notice, on the first row, as tabs are added, their width shrinks until the min width and then once the row is filled, it either scrolls right (or moves to the next row, depending on the chosen behaviour).
My issue is that I can set the max width but only the min is respected. The tabs never appear at the max width initially. They are always at their min so I end up with say 4-5 tabs per row (because they never shrink to their min).

I hope that makes sense - not very easy to explain!

[Reflective]

Reflective, thanks for your reply.
I was hoping to do it without an extension, only because I have so many, I feel like I should be reducing them!

Not sure whether this requires a script ,altough it should be very much achievable through CSS I would think.

I see this in the guts of TMP:

Code: Select all

gBrowser.tabContainer.mTabMaxWidth = tabMaxWidth;
gBrowser.tabContainer.mTabMinWidth = tabMinWidth;

If you have any ideas, appreciated.

According to CTR the default maximum width is 210px with 250px only applicable to the Classic layout.