Custom tab margin breaks drag and drop alignment

[sockpuppetclock]

Custom CSS that affects the tab margin will make drag and drop unaligned with the tab positions, e.g. .Tab { margin: 4px 4px; }

[dexeonify]

Indeed it does, which is why it's best not to use any margin-related CSS. Just curious, what are you trying to achieve? Assuming you just want to add some padding between the tabs, is changing --tabs-height sufficient? Then, you can add padding to .container if you want spaces around the sidebar.

[sockpuppetclock]

Just trying to add a vertical gap between tabs. If padding's the only way to do that then so be it, it just seems like both ways should be able to work.

[dexeonify]

Just trying to add a vertical gap between tabs

Adding vertical gap to the selection is difficult, and you have to resort to hacky solutions like this:

.Tab .lvl-wrapper:after {
  content: '';
  position: absolute;
  top: 4px;
  width: 100%;
  height: calc(100% - 5px);
  border-radius: 4px;
  z-index: -1;
}

/* Reset default styles */
.Tab:hover,
.Tab:active,
.Tab[data-active],
.Tab[data-active]:active,
.Tab[data-selected],
.Tab[data-selected]:hover,
.Tab[data-selected]:active {
  background: transparent;
}

/* Reapply styles */
.Tab:hover .lvl-wrapper:after {
  background-color: var(--tabs-bg-hover);
}

.Tab:active .lvl-wrapper:after,
.Tab[data-active]:active .lvl-wrapper:after {
  background-color: var(--tabs-bg-active);
}

.Tab[data-active] .lvl-wrapper:after {
  background-color: var(--tabs-activated-bg);
}

.Tab[data-selected] .lvl-wrapper:after {
  background-color: var(--tabs-selected-bg);
}

Source: https://www.reddit.com/r/FirefoxCSS/comments/rmi8dg/yet_another_sidebery_setup/

But in the end, it does what you want:

Some explanation:

It involves removing the tabs default background, and instead apply the background to .lvl-wrapper. Since .lvl-wrapper is slightly smaller than .Tab, it will appear to have some space in between the tabs. However, changing the padding in between the tabs isn't going to be that straightforward, because we are piggybacking on the .lvl-wrapper element instead of the .Tab element, which is what you are supposed to be using.

[mbnuqw]

Thanks for the detailed comment, @dexeonify.

Another way to add vertical margins between tabs in v4 is:

#root {
  --tabs-height: 30px;
}

.Tab {
  height: 28px;
  margin: 0 0 2px;
}

.Tab .close {
  height: 100%;
}

I use --tabs-height var to simplify calculation of tabs positions for drag and drop and right-click multi-selection (it's simplier to just get CSS var from the #root element than get the tab element, get its height, get its margins, check if margins collapsing...etc). I think that the best option here is to provide CSS vars that will allow user to easily change vertical/horizontal margins between tabs (and other elements). Plus, I should add some documentation for styling.