facebook / facebook/docusaurus
Usage of KaTeX in markdown tables causes overflow and responsiveness issues
- Lenguaje dominante
- TypeScript
- Estrellas
- 66.2k
- Forks
- 10k
- Merge medio
- 1 d 3 h
- PR fusionados (30 d)
- 52
Descripción
### 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:

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:

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.
Guía de contribución
Evaluación
Este issue todavía no se ha evaluado.