facebook / facebook/docusaurus

Firefox clips descenders in documentation sidebar labels on Windows

Open Beginner friendly
#12,299 0 comments 0 reactions 0 assignees View on GitHub
bug status: needs triage
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [x] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [x] I'm using the latest version of Docusaurus.
- [x] I have tried the `npm run clear` or `yarn clear` command.
- [x] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [x] I have tried creating a repro with https://new.docusaurus.io.
- [x] 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.

Image

**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:

```css
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:

```css
.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.

Contributor guide

Open the contributing guide

Research direction

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.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.