Sticky TOC pushes feature_row down

[iBug]

Environment

• Minimal Mistakes version: 4.16.6
• Ruby gem or remote theme version: Ruby gem
• Jekyll version: 3.8.6
• Git repository URL: Not required
• GitHub Pages hosted (if yes provide URL to site): Not required
• Operating system: Independent

Wrong behavior

The sticky TOC pushes the first feature_row at an unexpected place. If the key position: sticky; was removed from the class .sidebar__right.sticky, then the feature_row locates at the correct place (i.e. no margin between it and the above heading 2 Overview).

I have since disabled toc_sticky for the article to give it a normal look.

To reproduce

Create an article with a feature_row at top, as well as a few headings to give the TOC some height. Set toc_sticky on the page and check the result.

Other

I'd like to know how to patch the CSS to fix this issue locally, but I'm not experienced in CSS and haven't yet figured out how. Yes, I do patch the CSS to create my own desired layout.

[mmistakes]

Is this page hosted somewhere so I can inspect the HTML/CSS in browser?
Looks like the feature blocks are in a different <div> that comes after the one that has the main content and TOC.

Which is why you're seeing the space.

[iBug]

@mmistakes Here it is.

And no, the feature block is in the same parent div as other paragraphs and the TOC.

[mmistakes]

I don't know if this will have unintended consequences somewhere else but if you add float: left to .feature__wrapper it properly clear the sidebar.

.feature__wrapper {
  float: left;
}

[iBug]

@mmistakes That's more a workaround than a solution to me. The feature block is now at a wrong position. The first block should be right under <h2>Overview without text between them but with float: left;, a few lines of text are moved up to fill in the gap.

What actually work for me was to add .feature__wrapper { display: inline-block; } and the order of content is well preserved. I don't know if there's any side effect either.

[mmistakes]

Not sure. Feature blocks weren't designed to be used as you have so that's likely why they misbehave for you.

They're more for splash pages, not posts with table of Contents.

Since you're doing images use the gallery helper instead. That's what it's designed for.

https://mmistakes.github.io/minimal-mistakes/docs/helpers/#gallery

[iBug]

Oh, much thanks for that. I should've read the docs thoroughly first!