Firefox clips descenders in documentation sidebar labels on Windows

Start with DocSidebarItem/Link/styles.module.css and DocSidebarItem/Category/styles.module.css, then reproduce the sidebar in Firefox on Windows using the linked Docusaurus playground. Verify the change against labels containing descenders and long labels; done means glyphs render completely while two-line truncation remains intact.

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

Description

In Firefox on Windows, the lower portions of glyphs with descenders, such as g, p, q, and y, are clipped in documentation sidebar link and category labels.

The same sidebar renders correctly in Chromium-based browsers on Windows such as Brave.

This problem doesn't appear in Firefox on my MacBook Pro.

Potential Cause

This appears to be caused by the two-line clamping styles introduced in https://github.com/facebook/docusaurus/pull/11356. The label elements combine:

overflow: hidden;
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

with Infima's sidebar link line-height: 1.25. Firefox appears to calculate or paint the legacy -webkit-box clipping boundary differently from Chromium, causing glyph descenders to extend beyond the clipped area.

The problem affects both regular sidebar links and category labels:

• DocSidebarItem/Link/styles.module.css
• DocSidebarItem/Category/styles.module.css

There are no custom sidebar typography or layout styles on the reproduction site.

Workaround

A narrowly scoped workaround is to add a small amount of bottom padding inside the clipped label elements:

.theme-doc-sidebar-item-link .menu__link > span,
.theme-doc-sidebar-item-category .menu__link > span {
  padding-bottom: 1px;
}

This leaves the two-line clamp intact while providing enough room for Firefox to paint the descenders.

Reproducible demo

https://docusaurus.io/docs/playground

Steps to reproduce

1. Open Docusaurus Docs in Firefox on Windows
2. Inspect the lower portions of glyphs with descenders, such as g, p, q, and y. These are clipped in documentation sidebar link and category labels.

Expected behavior

Sidebar labels should render complete glyphs, including descenders, in Firefox while retaining the two-line truncation behavior for long labels.

Actual behavior

Firefox clips the bottom of glyphs with descenders. Chromium-based browsers render the same labels correctly.

Your environment

• Public source code: https://github.com/feO2x/kenny-codes
• Public site URL: https://kenny-codes.net/docs/guided-coding/
• Docusaurus version used: 3.10.2
• Firefox 152.0.6 (64-bit) on Windows
• Brave 1.92.141 on Windows
• Operating system and version: Windows 11 Pro 25H2 26200.8875

Self-service

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