This doesn’t sound possible. There is specific code in Firefox to scroll the horizontal tab strip to a position that shows selected tab but that of course only works with how horizontal tab strip is normally. Or in the case of built-in vertical tabs there is code to scroll vertically when tab is selected. But with the hacky vertical tabs, as far as Firefox’s logic knows, it is still a horizontal tab list and the logic doesn’t work. And with multi-row tabs the scrollable container is just totally different element than what’s normally used.

Looks like that style just needed a few updates. Should be all good now.

Yeah, so I haven’t actually come across very many situations where containers or container queries are useful (in the context of Firefox UI) but in this specific case they actually solve the issue perfectly.

You can actually use css container queries for this. Would go like this:

#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]){
  container-name: tabtab;
  container-type: inline-size;
}
@container tabtab (width < 50px){
  .tab-close-button{
    display: none
  }
}

You should be able to simply set z-index: 1 for #nav-bar as well to not have tabs cover it. And then add margin to both tabs and the content-area to create empty space at right. Then you could also do some hackery to make the scrollbar display in that empty area and make it not respond to mouse events, that would cause the tabs to not expand when scrollbar is hovered. But of course that also means that the scrollbar cannot be clicked - basically it becomes just an indicator, which might be alright.

So all in all you would add this to vertical_tabs.css:

:root:not([customizing],[chromehidden~="menubar"]){
  --uc-vertical-tabs-width: 40px;
}
:root:not([customizing]) #tabbrowser-tabs:hover{
  width: 220px !important;
  z-index: 1;
}
#nav-bar{
  z-index: 1;
}
#main-window:not([inDOMFullscreen]) > body > #browser{
  margin-right: calc(var(--uc-vertical-tabs-width) + 8px);
}
:root:not([customizing]) #tabbrowser-tabs{
  margin-right: 8px;
}
#tabs-newtab-button,
.tabbrowser-tab{
  pointer-events: auto;
}
scrollbox[orient="horizontal"]{
  scrollbar-width: thin;
  pointer-events: none;
  margin-right: -8px;
}

The empty area on right might become “wrong” colored, but you can then just add whatever background-color you want for the #main-window

Note, you said you have tabs on right side of window so the empty area only works with that.

You can get tabs over web-content by simply adding z-index to tabbrowser-tabs. So adding this after vertical_tabs code should work:

:root:not([customizing],[chromehidden~="menubar"]){
  --uc-vertical-tabs-width: 40px;
}
:root:not([customizing]) #tabbrowser-tabs:hover{
  width: 220px !important;
  z-index: 1;
} 

But I’m not sure how you should make scrollbar not trigger expansion.

I know that style did have the problem you describe, but it should have been fixed since early March. At least on my Linux and Windows systems this issue doesn’t occur anymore.

Yeah, I had tested with DE, but turns out that the update for it had failed for whatever reason and I was actually still on DE 137. Indeed updating to DE 138 had a problem - but it’s now fixed.

Other than tabs sidebar not having any background color (which also happens when it’s on left side, and is now fixed) I don’t see any problems. What else isn’t working properly?

Go to about:config and create a new number pref with name ui.prefersReducedMotion and set the value to 0. Afterwards that Firefox profile should use animations even if they are disabled on OS. Works on Windows at least.

I see. In that case you can achieve what you want - however, it really isn’t enough to just apply different flex-direction because all the buttons also have different styling. So you’ll end up with something like this:

sidebar-main{
  --uc-flex-direction: column;
}
sidebar-main[expanded]{
  --uc-flex-direction: row;
  --uc-buttonbox-padding-inline: var(--space-medium);
  --uc-sidebar-button-outer-padding: 0;
}
.tools-and-extensions{
  flex-direction: var(--uc-flex-direction) !important;
  justify-content: start !important;
  padding-inline-start: var(--uc-buttonbox-padding-inline,0) !important;
}
.tools-and-extensions > moz-button{
  width: unset !important;
  --button-outer-padding-inline: var(--uc-sidebar-button-outer-padding,var(--space-medium)) !important;
  --button-outer-padding-block-start: var(--space-xxsmall) !important;
}
button > .button-background{
  width: var(--button-size-icon) !important;
}

Since :host is unavailable in user style context, doing exactly this is probably impossible. But I wonder what you are actually trying to achieve? Moreover, under which condition does .tools-and-extensions ever have orientation=vertical attribute while sidebar-main is simultaneously expanded?

Sorry, but I don’t know what the issue could be. I’ve been trying all sorts of configurations but I cannot reproduce the issue you are describing anymore. I did find a problem that occurs when letterboxing is enabled and window is somewhat narrow where hovering a link then moves the web-content area - and fixed that though.

The last part of the style that you mentioned shouldn’t even be necessary anymore because web-content is covering the statuspanel - this wasn’t the case in some older Firefox versions.

Hmm, perhaps there’s some other condition relevant under which the issue still occurs. I tested with Tor Browser on Windows, and there the change I pushed fixed the issue.

This needed just a small addition to fake_statusbar_w_bookmarksbar.css, just update and it should work.

I doubt there’s any way for css to really distinguish between the two. But few things come to mind that I could believe might be usable as a proxy; perhaps there is a pref that is set only in wayland or only in x11 systems, or perhaps the window has some attribute set only in one of the two modes. If nothing else, you could invent a pref and use that to manually select when your rules should apply.

I’d probably just make the img use a variable if one is set, and then set the variable for the shadow root host based on its extensionId attribute:

.button-background > img{
  content: var(--my-custom-image,none);
}
moz-button[extensionId="some-extension-id"]{
  --my-custom-image: url("image.png");
}

CSS variables go through from the shadow host to the elements inside. So you can do stuff like this:

.tab-audio-button[muted]{
  --my-custom-image: url("muted.png");
}
.tab-audio-button[soundplaying]{
  --my-custom-image: url("sound.png");
}
.button-background{
  background-image: var(--my-custom-image) !important;
}

I don’t know if the alternate row color is what you want here, but you could add these:

  --background-color-canvas: var(--in-content-page-background) !important;
  --table-row-background-color-alternate: var(--in-content-box-background) !important;

Could you add an image showing what is changing to white. And also tell what color you expect instead.

Also, your snippet is missing a closing } so whatever you might have in your userContent.css after that can also be affecting about:config and other internal pages.