Skip to content

BountyDescription has no table styling — remark-gfm enables GFM tables but markdownComponents has no table/th/td override #257

Description

@chonilius

src/components/bounty/BountyDescription.tsx passes remarkPlugins={[remarkGfm]} to
ReactMarkdown, which enables full GitHub-Flavored-Markdown support, including pipe
tables (| Column | Column |). markdownComponents overrides p, a, code, pre,
ul, ol, li, strong, h1-h3, and blockquote — but not table, thead,
tbody, tr, th, or td.

GitHub issue templates frequently use tables (a "before/after" comparison, a
compatibility matrix, a checklist with columns). When one appears in a bounty's
description, react-markdown renders it with zero styling from this app's design
system — no border, no overflow-x-auto wrapper, no cell padding — falling back to the
browser's bare default table rendering, which can easily overflow
src/app/issues/[id]/page.tsx's max-w-4xl container width on any table with more than
a couple of columns, since nothing constrains or scrolls it.

Suggested fix: add table/thead/tbody/tr/th/td mappings to markdownComponents,
wrapping the table in an overflow-x-auto container and giving cells consistent
padding/border treatment matching the rest of the description's typography.

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programaccessibilityAccessibility (a11y) issuebugSomething isn't workinghelp wantedExtra attention is neededvery hardVery difficult task, expert-level effort required

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions