facebook / facebook/docusaurus

Usage of KaTeX in markdown tables causes overflow and responsiveness issues

Aperta
#9,785 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub
bug external status: needs more information
Lingua principale
TypeScript
Stelle
66.2k
Fork
10k
Merge medio
1g 3h
PR unite (30g)
52

Descrizione

### 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

**TLDR:** Usage of KaTex in a markdown table causes overflow issues that are especially notable on mobile (i.e., responsiveness becomes a real issue).

Overflow issues with KaTeX have been [discussed to some degree previously](https://github.com/facebook/docusaurus/issues/9383#issuecomment-1752095521). There it was noted a simple CSS fix could handle the display overflow mentioned:

```css
.math.math-display {
overflow-x: auto;
}
```

KaTeX mentions [in their docs](https://katex.org/docs/issues#css-customization) that CSS is customizable to some extent and that the following can be used to make individual equations scrollable horizontally:

```css
.katex-display { overflow: auto hidden }
```

But I think I've discovered another "overflow"-ish kind of issue when using KaTeX with Docusaurus -- if you use any math at all in a markdown table, then the page containing the markdown table has responsiveness issues, especially on mobile when the markdown table is bigger.

### Reproducible demo

https://stackblitz.com/edit/github-dnaesk-uowaem?file=docs%2Fintro.md

### Steps to reproduce

The repro linked above has a markdown table in `intro.md` where just the number `4` is rendered with KaTeX. Click "Open in New Tab" and toggle the device toolbar in dev tools. Reducing the screen size demonstrates the issue.

### Expected behavior

When the `4` being typeset with KaTeX is removed, there's no responsiveness issue:

![img1](https://github.com/facebook/docusaurus/assets/73953353/2a70c128-da0e-44c4-9002-c3892b4f62f5)

The general scrolling behavior (math present or not) for tables should be just like this.

### Actual behavior

Typesetting _anything_ in a markdown table with KaTeX leads to overflow-based responsiveness issues:

![img2](https://github.com/facebook/docusaurus/assets/73953353/9a9db6fb-f028-4b17-b5db-b89cffea0c70)

It's clear that somehow the content with the `4` is causing responsiveness issues (the problem is less noticeable if the `4` is moved to an earlier column in the table). Once the `4` is removed, there's no responsiveness issue, as demonstrated above.

### Your environment

- Public source code: https://stackblitz.com/edit/github-dnaesk-uowaem?file=docs%2Fintro.md
- Public site URL: https://stackblitz.com/edit/github-dnaesk-uowaem?file=docs%2Fintro.md
- Docusaurus version used: 3.1.0
- Environment name and version: chrome 120.0.6099.234

### Self-service

- [ ] I'd be willing to fix this bug myself.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.