The scrollable region does not include all of the tabs when using a css snippet ("Grouping tabs with spaces instead of indented tree #2777")

[seaflown]

I applied a CSS Snippet with the following contents from the wiki page:

/* show separator space between root level tabs */
tab-item[data-level="0"] {
  margin-top: calc(var(--tab-size) / 3); /* please change this as you like */
}
/* cancel needless separators on exceptions */
tab-item[data-level="0"].pinned,
tab-item[data-level="0"].pinned + tab-item[data-level="0"],
tab-item[data-level="0"] + tab-item[data-level="0"]:not([data-child-ids]) {
  margin-top: 0;
}

It was effective at separating tab groups,
but resulted in this:

I cannot scroll any further than what is shown.
I don't know CSS, but used the debugger to extend how far I could scroll:

.virtual-scroll-container {
  padding-bottom: 5000px; 
}

More padding must be added as the number of tabs increases.
How could my goal be accomplished without manual increases to the scrollable region as tabs are opened?

Thank you ツ

[piroor]

There is a discussion about this topic, please see the issue #3592.