Any way to visually space tab trees without breaking drag&drop?

[Baerbeisser]

Abstract

I use a custom theme in which i want to separate open tab trees for visibility.
But this causes the drag&drop indicator (to drag a tab as a child element) to be misaligned.
It looks like this:

Steps to see the situation

Use Photon theme and add this snippet:

/* space between trees  (root level tabs) */
tab-item[data-level="0"]:not(.subtree-collapsed) {
  margin-top: calc(var(--tab-size) / 4);
  /*border-top: 1px solid lightgrey;*/
}

Expected result

This but with trees separated:

Best would would be if drag&drop handler is calculated per tree (instead of the whole sidebar). But i guess this is a bit much asked.
Is there a CSS variable or workaround with which i can correct it?
I tried with height instead of margin but that has the same issues.

Actual (present) result

drag&drop indicator gets misaligned, with margin-top * nr. of open trees the further down.

Environment

• Platform (OS): Linux but independent
• Version of Firefox: 128.0 esr
• Version (or revision) of Tree Style Tab: 4.0.20

[piroor]

The CSS hack is not suitable for TST 4.0 and later. See also discussions in #3592.

[Baerbeisser]

Ok, any built-in way to achieve the same or something similiar?

[piroor]

Sadly there is no alternative method for now. As I told at #3592 (comment) we need to implement new helper addon to do that with newly designed API, but such an API may reduce performance if I design it carelessly...

[Baerbeisser]

Fine, this works too.

tab-item[data-level="0"][data-child-ids] {
  /*margin-top: calc(var(--tab-size) / 4);*/
  border-left: 3px solid var(--text-unread);
}

Thanks for the time!