Sidebar content is blank while using Large/ Very Large browser font size settings #8291

Context

No response

Bug description

When visiting the documentation site and increasing the browser’s font size to Large or Very Large, the sidebar transforms into a drawer at certain points. However, when the drawer is opened, its contents may appear empty.

Thoughts:
After looking into this, this seems to be because height: 0 style is added to .md-sidebar--primary .md-sidebar__scrollwrap. It seems to be added in mountSidebar

I think the cause may be because of mountSidebar being triggered unintentionally when tablet styles are applied:

There seems to be some discrepancies in Javascript and CSS deciding if tablet styles should be displayed, which caused this issue:

• screen$ is using px for matchMedia:
  

  mkdocs-material/src/templates/assets/javascripts/bundle.ts

  Line 135 in 2b0417f

  const screen$ = watchMedia("(min-width: 1220px)")

• in CSS em is used to switch the desktop and tablet styles:
  

  mkdocs-material/src/overrides/home.html

  Line 55 in 2b0417f

  @media screen and (min-width: 76.25em) {

Changing 1220px to 76.25em seems solving the issue in local

Related links

• Reporting a bug
• Consider switching media queries to px breakpoints #5530
• Not sure if this is related to Footer Overlaps Left Navigation between 60em and 76.25em if the nav is longer than the content #8237, which seems to also have mismatching breakpoints and styles

Reproduction

The issue could be replicated on Material for MkDocs

Steps to reproduce

1. Change browser font size settings:
   Chrome, Edge: Large or Very Large
   Safari: minimum font-size as 24px
2. Set browser window width to be within 1220px to 1524px( or 1220px to 1829px for Very Large and Safari)
3. go to https://mrkeo.github.io/
4. Click the hamburger bar icon to open the sidebar
5. Verify the sidebar content

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.