Increase TOC spacing between entries (again)

[Jondolf]

#1175 made the sidebar table of contents less dense, but it still looks too dense. It's hard to distinguish between what is a different entry or just an entry with a name that spans multiple lines, and it just looks a bit out of place with the rest of the layout being more spacious.

Before:

After:

Note: The screenshots above use the text styling from #1176, but these changes are not included in this PR.

[doup]

Hahaha, again. For me it's a 4. Two 5px rows won't add to a multiple of 4px (not an argument really unless you self-impose this arbitrary "4px multiples" rule to yourself), 6px adds too much white space.

[doup]

I just noticed, in favor of 4px: is what the sidebar .tree-menu__link uses. 🙃

[SIGSTACKFAULT]

Need to remove the rule on line 42, or else the spacing would be smaller on mobile. Or make it even bigger, up to you.

[Jondolf]

Need to remove the rule on line 42, or else the spacing would be smaller on mobile. Or make it even bigger, up to you.

Oops, missed that. I made it 6px for now since 4px definitely seemed too small on mobile and even 5px was a bit small. (And based on the existing comment it should be larger than desktop, unless we just remove the rule)

I just noticed, in favor of 4px: is what the sidebar .tree-menu__link uses. 🙃

It uses that, yes, but the padding for that doesn't actually affect the vertical size (except for multi-line items) because the height there is determined by min-height: 32px. With both using a vertical padding of 4px (for top and bottom), the tree menu links are 32px high while the TOC items are just 26.67px high. So the visual spacing is different anyway. With a padding of 6px or even 7px the height would be more similar (not that we necessarily want it to be the exact same).

Here's one more comparison of the options:

4px:

5px:

6px:

I would personally go for either 5px or 6px, both are fine for me. I generally prefer making spacing larger unless there is practical benefit to making it more dense (like as an option for email or messaging applications).

[Jondolf]

We could also use padding-block: 4px, but make the min-height larger similarly to the tree menu links

[doup]

I was going to give the OK to 5px… but now that I see this after few days, 6px also doesn't look bad. Either one is OK for me. 😅