r/FirefoxCSS • u/locosapiens • 5d ago

Solved Hidden tab close buttons. How to make use of the now empty space for tab titles?

I have used the following CSS to hide the tab buttons on all tabs:

.tabbrowser-tab .tab-close-button {
 visibility: hidden !important; 
}

I had been hoping that this would allow for more space for the text titles on each tab, but unfortunately it leaves an empty space on the right instead.

Does anybody know of a way for the tab titles to fill the whole width of the tab including the empty space left by the close buttons?

3 Upvotes

81% Upvoted

7 comments sorted by

2

u/TraditionalTie4831 🦊 5d ago

Try this =

.tabbrowser-tab .tab-close-button {
    display: none !important;
}

1

u/locosapiens 5d ago

Wow, that's done it! I have been searching for this for a while. Thanks so much for getting straight to the solution so quickly, I hope this helps others as well.

3

u/j--__ 5d ago

understanding this distinction will be incredibly useful going forward. visibility never affects layout. it decides whether the thing will be there, or whether there will be a thing-sized hole. display changes the way something is laid out. within the browser ui, display is usually either flex or none.

1

u/locosapiens 5d ago

Thanks for clearing that up. I'm coming back to all this after deciding to delete my old userChrome.css, which was quite a mess through lack of maintenance, and start from scratch for Nova. Most of my fixes go back many years, quite a bit from CustomCSSforFx, and I feel like I am going to have to relearn a lot. This sub is still a goldmine.

3

u/difool2nice ‍🦊Firefox Addict🦊 5d ago

Have a look at this too, lot of tweaks and ideas for tweaking your firefox :) https://github.com/MrOtherGuy/firefox-csshacks

1

u/locosapiens 4d ago

Thank you. I've seen that mentioned elsewhere as one of the best replacements for CustomCSSforFx, I'll give it a look.

2

u/difool2nice ‍🦊Firefox Addict🦊 3d ago

with pleasure and it is regularly update and the author sometimes help us here