🐛 fix: markdown preview now matches GitHub rendering (#3974)#3997
🐛 fix: markdown preview now matches GitHub rendering (#3974)#3997clubanderson merged 1 commit intomainfrom
Conversation
Replace non-functional prose classes (no @tailwindcss/typography installed) with a purpose-built .ghmd CSS class that replicates GitHub's dark-mode markdown styling. Covers headings with bottom borders, inline code with gray background, fenced code blocks, blockquotes, tables with alternating row colors, links, lists, and horizontal rules. Simplify ReactMarkdown usage by removing broken custom component overrides — the CSS handles all styling correctly, including the inline-vs-block code distinction that the old JS logic got wrong for language-free code blocks. Closes #3974 Signed-off-by: Andrew Anderson <andy@clubanderson.com>
kubestellar-prow
bot
added
the
dco-signoff: yes
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
✅ Deploy Preview for kubestellarconsole ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
kubestellar-prow
bot
added
the
size/L
|
👋 Hey @clubanderson — thanks for opening this PR!
This is an automated message. |
|
Thank you for your contribution! Your PR has been merged. Check out what's new:
Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey |
There was a problem hiding this comment.
Pull request overview
This PR updates the Contribute → Bug Report markdown preview to render closer to GitHub Flavored Markdown by moving presentation concerns out of ReactMarkdown component overrides and into a dedicated CSS class.
Changes:
- Added a
.ghmdCSS class to style markdown elements (headings, code blocks, tables, blockquotes, etc.) to resemble GitHub’s dark-mode rendering. - Updated
FeatureRequestModalto apply.ghmdand removed customReactMarkdowncomponent overrides, relying on CSS for formatting.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
web/src/index.css |
Adds .ghmd markdown styling rules intended to mimic GitHub dark-mode markdown presentation. |
web/src/components/feedback/FeatureRequestModal.tsx |
Switches markdown preview containers to use .ghmd and simplifies ReactMarkdown usage by removing custom renderers. |
| /* GitHub-flavored markdown preview (dark mode) */ | ||
| .ghmd { | ||
| color: #e6edf3; | ||
| font-size: 14px; | ||
| line-height: 1.6; |
There was a problem hiding this comment.
.ghmd hard-codes GitHub dark-mode colors (e.g., color: #e6edf3) without scoping to .dark or providing a .light variant. Since the app supports a .light theme (CSS variables in this file), this will likely produce very low-contrast text on light backgrounds in the markdown preview. Consider either scoping these rules under .dark .ghmd and adding .light .ghmd styles (GitHub light palette), or rewriting .ghmd to use the app’s theme CSS variables so contrast remains accessible in both themes.
| <div className="w-full h-[200px] overflow-y-auto px-3 py-2 bg-secondary/50 border border-border rounded-lg ghmd"> | ||
| {description.trim() ? ( | ||
| <ReactMarkdown | ||
| remarkPlugins={[remarkGfm, remarkBreaks]} | ||
| components={{ | ||
| code({ className, children, ...props }) { | ||
| const match = /language-(\w+)/.exec(className || '') | ||
| const isInline = !match && !className | ||
| return isInline ? ( | ||
| <code className="bg-black/20 px-1 rounded text-purple-300" {...props}>{children}</code> | ||
| ) : ( | ||
| <pre className="bg-black/30 rounded-lg p-3 overflow-x-auto my-2"> | ||
| <code className={className} {...props}>{children}</code> | ||
| </pre> | ||
| ) | ||
| }, | ||
| table: ({ children }) => ( | ||
| <div className="overflow-x-auto w-full my-3 rounded border border-border"> | ||
| <table className="min-w-full border-collapse text-sm">{children}</table> | ||
| </div> | ||
| ), | ||
| thead: ({ children }) => <thead className="bg-secondary/50">{children}</thead>, | ||
| th: ({ children }) => <th className="px-3 py-2 text-left text-xs font-semibold border-b border-border">{children}</th>, | ||
| td: ({ children }) => <td className="px-3 py-2 text-xs border-b border-border/50">{children}</td>, | ||
| blockquote: ({ children }) => <blockquote className="border-l-4 border-purple-500/50 pl-3 my-3 text-muted-foreground italic">{children}</blockquote>, | ||
| }} | ||
| > | ||
| <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}> | ||
| {description} | ||
| </ReactMarkdown> |
There was a problem hiding this comment.
Markdown preview rendering/styling changed substantially (custom renderers removed, new .ghmd class introduced), but the existing unit test only checks that the component exports. Add tests that render the modal preview and assert key GFM elements (e.g., fenced code blocks without a language, tables, blockquotes) produce the expected DOM structure/classes so regressions are caught.
🔄 Auto-Applying Copilot Code ReviewCopilot code review found 0 code suggestion(s) and 2 general comment(s). Also address these general comments:
Push all fixes in a single commit. Run Auto-generated by copilot-review-apply workflow. |
Summary
.ghmdCSS class that replicates GitHub's dark-mode markdown styling (headings, code blocks, tables, blockquotes, links, lists, horizontal rules)prose prose-invertclasses (@tailwindcss/typographyis not installed, so they had no effect)Test plan
Closes #3974