Show page titles on Firefox's pinned tabs

I love vertical tabs. I used Tree Style Tab for years, then switched to Sidebery and recently to Firefox's native vertical tabs. I like them, but I was annoyed how pinned tabs looked. By default they are collapsed, side by side, with only their favicon visible:

Luckily, there is a way to change that by adding some custom CSS. After applying it, my tabs looked like this:

CSS #

I couldn't find an existing snippet anywhere, and it took me some trial and error to get it right. Here is the CSS. I hope you find it useful.

/* Show title */
#pinned-tabs-container[orient='vertical'] .tab-label-container {
  display: flex !important;
  margin-right: 1.5rem;
}

/* Change tabs layout to be stacked under each other */
#pinned-tabs-container[orient='vertical'] {
  --pinned-slot-display: block;
}

slot[part~='items-wrapper'] {
  display: var(--pinned-slot-display, flex) !important;
}

/* Remove extra vertical padding */
#pinned-tabs-container > .tabbrowser-tab {
  padding-block: 0 !important;
}

/* Move the green status dot to the right */
#pinned-tabs-container .tab-content:is([titlechanged], [attention]) {
  background-position: right 1.25rem center !important;
}

/* Make space for the green status dot */
#pinned-tabs-container .tab-icon-stack {
  margin-inline: 0.5rem;
}

Tested on Firefox 157 on macOS.

How to use userChrome.css #

To customize Firefox's UI via CSS, you'll need the following:

• In Firefox, open the about:profiles page and open your profile's Root Directory in your file manager.
• Inside your profile folder, create a folder named chrome.
• Inside it, create userChrome.css (if it doesn't already exist).
• Add your custom CSS to it.
• Open about:config, find toolkit.legacyUserProfileCustomizations.stylesheets and set it to true.
• Restart Firefox.

If you need more details, there is a great website that explains it in detail.