Fix markdown formatting in comment sections #286
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Remove conflicting text-sm overrides on p and span elements - Add prose-sm variant for proper small text sizing - Use prose-sm container class instead of element-level overrides - Remove unused fontSize parameter from generateClassOverrides
Copilot
AI
changed the title
[WIP] Bug - Formatação markdown dos comentários.
Fix markdown formatting in comment sections
Jul 14, 2025
Copilot finished work on behalf of
robertotcestari
July 14, 2025 11:51
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Markdown formatting was broken in the comments section due to CSS class conflicts. The
fontSize="small"prop on MarkdownRenderer was applyingtext-smdirectly to<p>and<span>elements, which interfered with the prose typography system, causing markdown elements like bold, italic,code, links, and lists to lose their formatting.Solution
This fix addresses the root cause by:
text-smclasses applied directly to<p>and<span>elements within the MarkdownRendererprose-smCSS class that works harmoniously with the existing prose systemprose-smclass to the wrapper container instead of individual elementsTechnical Changes
app/components/ui/markdown-renderer/index.tsx:
text-smclass from paragraph (p) element overridestext-smclass from span element overridesprose-smclass for small font size variantfontSizeparameter fromgenerateClassOverridesfunctionapp/typography.css:
prose-smCSS class with proper font-size and line-height for commentsTest Results
The fix ensures all markdown elements render correctly in comment sections:
✅ Bold text renders correctly
✅ Italic text renders correctly
✅
Inline coderenders correctly✅ Lists render correctly
✅ Links render correctly
✅ Blockquotes render correctly
✅ Code blocks render correctly
✅ Proper font sizing (smaller for comments)
✅ Dark mode compatibility
Impact
Comments now display properly formatted markdown while maintaining the smaller text size appropriate for comment sections. This resolves the formatting issues where markdown syntax was visible instead of being rendered.
Before: Markdown formatting broken due to CSS conflicts
After: All markdown elements render correctly with proper small text sizing
Fixes #285.
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.