Markdown: wide tables overflow their container instead of scrolling
Maintainers usually reply within 1 day
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 78/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- react, scss, typescript
- Domain
- accessibility, frontend
Research direction
Start in Markdown.tsx and Markdown.module.scss to see how remark-gfm tables are rendered and styled; compare the existing CodeBlock overflow handling. Add a browser test for a wide table in a narrow container and check that the Markdown box does not overflow. Done when the table scrolls horizontally within its rounded container and the test passes.
Written by the indexing model from the issue text.
Description
Problem
In Markdown, a GFM table that is wider than its container is not contained: it overflows the Markdown box and sticks out past the background of the surrounding element. There is no way to see or scroll to the clipped part.
Seen in the mStudio AIssistant drawer (Markdown inside a responder Message) at a 375 px viewport: the table's min-content width is 299 px, the Markdown box is 267 px, so the table sticks out about 15 px past the right edge of the message bubble. Any narrow container shows the same, e.g. a narrow column or a sidebar.
Reproduce: render Markdown with a 3-column table whose cells hold a few words (e.g. | Typ | Version | Einsatz | with "WordPress, Shopware, TYPO3") inside a container of about 260 px.
Cause
Markdown.module.scss styles the table that remark-gfm renders, with overflow: hidden on the table itself (for the rounded corners), but there is no wrapping element that limits the width and scrolls. A table cannot shrink below its min-content width, so it overflows its parent.
CodeBlock in the same component already handles this: a long line scrolls inside the block.
Expected
A table never gets wider than the Markdown container. When its content does not fit, the table scrolls horizontally inside its own box (like CodeBlock), and the rounded border stays visible.
Suggested approach
Override the table renderer in Markdown.tsx and wrap it in an element with max-inline-size: 100% and overflow-x: auto that carries the border and the corner radius, so the rounded corners stay intact while the content scrolls. Add a browser test that renders a wide table in a narrow container and checks that the Markdown box does not overflow.
- Dominant language
- TypeScript
- Stars
- 15
- Forks
- 4
- Avg merge
- 2d 2h
- Merged PRs (30d)
- 128
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from mittwald/flow
-
docs(agents): state which release line a change belongs to next to the migration catalogue ruleOpen
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
documentation
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
mittwald/flow#3205 · 1 comment ·
Maintainers usually reply within 1 day
-
feedback to-discuss ux
Difficulty 5/5 Over a week Newbie friendliness 25/100
Maintainers usually reply within 1 day
-
feedback to-discuss ux
Difficulty 5/5 Over a week Newbie friendliness 25/100
Maintainers usually reply within 1 day
-
feedback to-discuss ux
Difficulty 4/5 3-5 days Newbie friendliness 48/100
Maintainers usually reply within 1 day
Similar issues
-
needs-triage
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
microsoft/playwright#43875 · 1 comment ·
Maintainers usually reply within 1 day
-
feature
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
calagopus/panel#285 · 1 comment ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 Under an hour Newbie friendliness 88/100
adobe/react-spectrum#10909 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Run the dependency drift checkPossibly taken @spaceninja claimed this today. Open
Difficulty 1/5 Under an hour Newbie friendliness 72/100
cloudfour/lighthouse-parade#449 ·
Maintainers usually reply within 1 day