Long sidebar overlaps with post content when unfolded

[carlesfernandez]

• This is a question about using the theme.
• I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
• This is a feature request.
• I have updated all gems with bundle update.
• I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version: 4.0.8
• github-pages version: 104
• Operating system: macOS Sierra

---

Expected behavior

A long sidebar overlaps with post content when the menu is unfolded, when using Chrome for Android. It looks good (i.e., the menu folds and unfolds correctly) in Chrome for desktop/laptops.

Steps to reproduce the behavior

Example:
Web: http://gnss-sdr.org/news/
Repo: https://github.com/gnss-sdr/geniuss-place
Using GitHub Pages

How it is rendered by Chrome for Android when menu is unfolded:

[mmistakes]

Will have to see if I can reproduce it. Sure looks like this issue from before related to the "sticky" sidebar.

#396

[carlesfernandez]

I've done some theme customization, so maybe I've messed up things at some point. Thanks for looking it up, and of course also for this awesome theme!

[mmistakes]

I think I know what the issue is. On screen sizes 1024 and up, position: sticky is being applied to the sidebar. I have the sidebar nav list showing up at 1023 so it's having the sticky position applied. Which is screwing up the layout.

Shouldn't take much CSS to fix it.

[mmistakes]

@carlesfernandez Just to be sure it's not due to a customization you did (I don't think it is 😄) can you verify if this page looks messed up too in Chrome for Android?

https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/

[carlesfernandez]

Yes, this page suffers from the same problem:

[mmistakes]

OK. Thanks for checking. It's definitely not the sticky class. Looks like only part of the sidebar overlaps. Think it might have something to do with how Chrome on Android handles viewport units.

Might need to change 100vh to 100% in _navigation.scss

.nav__list input:checked ~ .nav__items {
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
-   max-height: 100vh;
+   max-height: 100%;
    overflow: visible;
    opacity: 1;
    margin-top: 1em;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

[mmistakes]

Seeing it in Firefox's responsive web tester. Changing max-height: 100vh to max-height: 100% appears to fix it. Can you confirm if it fixes it for Chrome for Android since I have no way of testing that?

[carlesfernandez]

You nailed it!

I confirm this change solves the issue in Chrome for Android. Thank you!

[mmistakes]

Fantastic. Thanks for identifying and testing the bug.