I am trying to remove the margin space between the tab component and the code block (that uses expressive-code).
#Starlight theme
fathom garnet
I have narrow it down that the margin is applied twice however they are both collapsed into one because they are the same size. The first margin is applied by the markdown typography because it elements injected into the tab are by default markdown content. The second it's applied by ec, mosty likely to have some specing between code blocks.
zealous vale
Should be possible with a margin-top: 0 !important somewhere? Just need to find the right class name combo I guess 🤔
amber nebula
EC doesn't apply margins to its code blocks
So it must be something coming from the tabs component
I can remove the margins with this CSS:
.tablist-wrapper~[role=tabpanel] {
margin-top: 0;
}
The only problem I see is that this removes the top margin from all tab panels, not only from the ones with a code block in them.
If you want to keep the margins on the other tab panels, you can also put a negative margin on the EC blocks inside a tabpanel to counteract the margin coming from the tab panel:
[role=tabpanel] > .expressive-code:first-child {
margin-top: -1rem;
}
Or if you think that the :has CSS pseudo class has enough browser support for you already, you could also use that one. I'm still not using that one because it's so fresh 😄
amber nebula
You're a hairy wizard!
fathom garnet
Manage to get it to work, however, it seems that my initial assumption that tabs works with any type of content was disrupted once I tested it on VitePress
Starlight theme
I seem to have hit a minor block with local CSS variables in Starlight. I wanted to edit the local variable for the padding left in the TOC (the padding that applies for different #H levels. However, it seems that my override is injected first so the local variable is not changed 😦
Oh wait a second I used >
😅
I need sleep, but it works now 🥳
zealous vale
Manage to get it to work, however, it seems that my initial assumption that tabs...
Ah yeah I think VitePress only has “code tabs” and not other tabs?