[BUG] Tab labels too short

[hungry-scientist]

Describe the problem

How can I extend the tab label text width so that I can see more clearly what websites I've opened? I can't seem to figure it out just by poking with the browser toolbox. Could someone please help?

Version

1.4.4

OS

MacOS 14.1

Firefox Version

124.0.0.2

Install Options

-s

Colour Theme

No

Additional info

No response

Please tick the boxes

• You are using a current version of the theme. (check the date associated with the version)
• You've checked that this issue hasn't already been raised

[AdamXweb]

Hi hungry-scientist,
thanks for submitting the bug.
I'll look into this, as i believe it may be related to the -s install option.
Could you try installing without it to test?
This is what I get:

Then again, it does raise an issue where there is too much padding in the URL bar also:

[AdamXweb]

@hungry-scientist Also, can you please check the version of the theme you're using?

[hungry-scientist]

Hey, thanks for the prompt response! Re-installing definitely helped, but I think it's the swapping of the close button that causes the issue. I remember I had to adapt your code to actually swap the button to the left (by default the close button just pushes in the tab labels and shrinks them, but I found that it would only move to the left if I changed the order value from 0 to -1 – but then the tab labels stay short). I dodn't mention installing the theme with this since I just added the code to my userchrome.css. Could you test the theme with the code below and see if anything else needs adjusting?

Thanks so much, really appreciate the support!

/* Left hand side tab close */

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tab-content:not([pinned])::before,
.tab-content:not([pinned])::after {
    display: flex;
    content: "";
    flex-grow: 2
}

.tab-content:not([pinned])::after {
    flex-grow: 1;
}
/* Place close button on left side */
.tab-content {
    display: flex !important;
}

.tab-close-button {
    order: -1
}

.tab-icon-stack{
    padding-left: 1px !important;
}
.tabbrowser-tab[class*="identity-color-"][pinned] .tab-content{
    display:flex !important;
}
.tab-content:not([pinned])::before, .tab-content:not([pinned])::after {
  flex-grow: 1;