Tabs are larger than Epiphany about elementaryos-firefox-theme

[Vento09]

I don't like the Epiphany's tab width. In Elementary OS, all applications, which use tabs, are larger than Epiphany.

[1º Firefox; 2ºEpiphany; 3º Files; 4º Terminal; 5º Code]

See picture that Files, Terminal and Code's tab is larger than Epiphany and Firefox.

I've tried to change the width to stay like them and I've noticed that tabs was skipping to different positions. So I have changed userChrome.css from line 273 and it works 😄

#tabbrowser-tabs {
display: block;
width: calc(100vw - 100px) !important;/**/
}
/* tabs width */
.tabbrowser-tab:not([pinned]) {
width: 180px !important;
min-width: 50px !important;
}

[Zonnev]

Since adding display:block wasn't a perfect solution, because the tabs close button sometimes didn't appear, I found a better solution:

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

So this issue is completely fixed now ))

[Zonnev]

Its fixed, tabs width are same size as Epiphany in lastest userChrome.

[Zonnev]

Seems it isn't fixed, the tabs move to different positions when selecting dark mode.

[Zonnev]

I changed back the tab width in the latest userChrome. It seems there is a bug in Firefox which makes this strange behaviour of tabs skipping to different positions when changing the tab width.

[Hedronmx]

I don't like the Epiphany's tab width. In Elementary OS, all applications, which use tabs, are larger than Epiphany.

[1º Firefox; 2ºEpiphany; 3º Files; 4º Terminal; 5º Code]

See picture that Files, Terminal and Code's tab is larger than Epiphany and Firefox.

I've tried to change the width to stay like them and I've noticed that tabs was skipping to different positions. So I have changed userChrome.css from line 273 and it works smile

#tabbrowser-tabs {
display: block;
width: calc(100vw - 100px) !important;/**/
}
/* tabs width */
.tabbrowser-tab:not([pinned]) {
width: 180px !important;
min-width: 50px !important;
}

It works!! Looks nice!

[Zonnev]

@Vento09 Thanks for solving it. I will remove the calculation width as well since block takes the whole width anyways. ))

Edit: I wont remove it since it keeps room for the private browsing icon.

[Hedronmx]

I did some further modifications to the titlebar you can see the comparison below.

I changed back, forward and refresh padding, url bar margins and close button offset
How do I share these changes?

You can see the changes here. It already includes the code from Vento09.
Top is Firefox, Bottom Epiphany
https://www.diffchecker.com/NQfk3LIi

[Zonnev]

@Hedronmx You are styling the navigation buttons to Epiphany which has different padding than the default elementary gtk theme. I like to keep it the way it is now but thank you for sharing your adjustments. Maybe you can fork this theme?