Usage of KaTeX in markdown tables causes overflow and responsiveness issues #9785
Labels
bug
An error in the Docusaurus core causing instability or issues with its execution
external
This issue is caused by an external dependency and not Docusaurus.
status: needs more information
There is not enough information to take action on the issue.
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.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. There it was noted a simple CSS fix could handle the display overflow mentioned:
KaTeX mentions in their docs that CSS is customizable to some extent and that the following can be used to make individual equations scrollable horizontally:
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 number4
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 the4
is moved to an earlier column in the table). Once the4
is removed, there's no responsiveness issue, as demonstrated above.Your environment
Self-service
The text was updated successfully, but these errors were encountered: