Current way to hide the scroll bar?

[azdle]

The current snippet in the wiki for how to hide the scroll bar doesn't really work. It does hide the scroll bar, but the tabs still jump out from under your cursor when you go to click on them.

I figured out that this snippet will fix it:

#tabbar.overflow { scrollbar-width: none; }

:root.left.shift-tabs-for-scrollbar-only-on-hover.on-scrollbar-area:hover #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance,
:root.left:not(.shift-tabs-for-scrollbar-only-on-hover) #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance {
  margin-left: calc(var(--tab-margin-left) + var(--tab-indent));
}

:root.right.shift-tabs-for-scrollbar-only-on-hover.on-scrollbar-area:hover #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance,
:root.right:not(.shift-tabs-for-scrollbar-only-on-hover) #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance {
  margin-right: calc(var(--tab-margin-right) + var(--tab-indent));
}

Just removing + var(--shift-tabs-for-scrollbar-distance) from each of the original definitions:

treestyletab/webextensions/sidebar/styles/base.css

Lines 341 to 355 in 74d0aa9

	/* auto-hidden scrollbar placeholder workaround */
	:root.left.shift-tabs-for-scrollbar-only-on-hover.on-scrollbar-area:hover #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance,
	:root.left:not(.shift-tabs-for-scrollbar-only-on-hover) #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance {
	margin-left: calc(var(--tab-margin-left) + var(--tab-indent) + var(--shift-tabs-for-scrollbar-distance));
	}
	:root.right tab-item:not(.pinned) tab-item-substance {
	margin-right: calc(var(--tab-margin-right) + var(--tab-indent));
	}
	/* auto-hidden scrollbar placeholder workaround */
	:root.right.shift-tabs-for-scrollbar-only-on-hover.on-scrollbar-area:hover #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance,
	:root.right:not(.shift-tabs-for-scrollbar-only-on-hover) #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance {
	margin-right: calc(var(--tab-margin-right) + var(--tab-indent) + var(--shift-tabs-for-scrollbar-distance));
	}

But that seems super fragile. Is there some better way to do this? Maybe some way to hard override the --shift-tabs-for-scrollbar-distance variable?

[azdle]

I figured out a much simpler version that does seem to work.

#tabbar.overflow {
  scrollbar-width: none;
  --shift-tabs-for-scrollbar-distance: var(--tab-margin-right) + var(--tab-indent);
}

However, I don't understand why it works.

I would think that the right solution would be:

#tabbar.overflow {
  scrollbar-width: none;
  --shift-tabs-for-scrollbar-distance: 0;
}

But, that collapses all nested tabs so that they are no longer indented. But I can't fathom why that is happening. I would think that the margin-left: calc(var(--tab-margin-left) + var(--tab-indent) + var(--shift-tabs-for-scrollbar-distance)); should be 12 = 0 + 12 + 0, but for some reason it's coming out 0 = 0 + 12 + 0.

I'm at about the limit of my ability to debug CSS now too. Anyone else understand what is going on there or have an even simpler way to fix this?