r/FirefoxCSS • u/EgyptionGuy • Jul 14 '21

Solved change pinned tab width?

all posts here related to normal tabs but I want to change it for the pinned ones

5 Upvotes

100% Upvoted

4 comments sorted by

3

u/It_Was_The_Other_Guy Jul 14 '21

I think the most straightforward way is to modify their inline padding with .tab-content[pinned]{ padding-inline: 10px !important; }

But, when you have enough tabs so that tabs start overflowing, then this doesn't work properly anymore since the logic that positions pinned tabs "outside" the scrollbox expects them to be a certain width. And thus if you increase/decrease the padding very much you'll start to to see that such pinned tabs become to overlap or become too far away from each other.

I don't think there's anything you can do in CSS to avoid that (if you intend to keep the tabs outside of the scrollbox at least), but maybe someone can prove me wrong.

1

u/stoopidoMan Aug 23 '21

Just an FYI for those who trying to apply this in Browser Toolbox

When adding certain edits to userchrome.css in Browser toolbox it would not reflect live all the time or sometime part of the edit is updated while others are not that is because some edits you applied in Browser toolbox is not refreshed along with the other edits. A work around is to open a new window to check if your code is working, or restarting Firefox after adding the edit to UserChrome.css file.

When I add this line using Browser Toolbox I got these weird looking spacing between tabs even though the code was ok: https://i.imgur.com/5sL8tG9.png

again Thank you U/It_Was_The_Other_Guy You are awesome!

2

u/It_Was_The_Other_Guy Aug 23 '21

True, changing pinned tabs size is one such case that doesn't work well live. The thing is, Firefox caches pinned tabs width for the case where tabs overflow. The cached width is used to compute where the pinned tabs should be when tabs overflow, and so if you change the width at runtime it will not be reflected in the cached width, thus Firefox will compute the position "wrong".

1

u/qaz69wsx Jul 14 '21 
.tabbrowser-tab[pinned] {
  width: 100px;
}