docusaurus: @media rule thresholds do not account for browser font size setting

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Most things in docusaurus scale with rem units, but the thresholds for @media rules are set in px. Which means setting a large font size in the browser effectively “zooms in” the page, but the @media rules do not trigger like they would with actual zoom.

Screenshots below are from the page https://docusaurus.io/docs/styling-layout with the same zoom level (100%) and viewport size (~1000px). The large font size breaks the layout.

normal font size	large font size

Reproducible demo

https://docusaurus.io/docs/styling-layout

Steps to reproduce

1. Go to https://docusaurus.io/docs/styling-layout
2. Set viewport width to ~1000px, just before the @media rule triggers
3. Set large font size in the browser
4. Observe the broken layout

Expected behavior

IMHO it would make sense to use rem unit for @media thresholds as it would represent the “actual” scale of the content (accounting for both zoom and browser font size).

Actual behavior

TOC on the right was unreasonably squished and navbar at the top has overlapping text. Normally with the content being enlarged this much a @media rule would trigger, but it does not happen because the threshold is tied to px and is not aware of browser font size setting.

Your environment

Link: https://docusaurus.io/docs/styling-layout Browser: Brave 1.58.137 OS: Windows 11

Also tried locally with npx create-docusaurus@latest my-website classic (pulled version 2.4.3), same result.

Self-service

• I’d be willing to fix this bug myself.