facebook / facebook/docusaurus

Usage of KaTeX in markdown tables causes overflow and responsiveness issues

Đang mở
#9,785 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug external status: needs more information
Ngôn ngữ chính
TypeScript
Star
66.2k
Fork
10k
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
52

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.