shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: render markdown lists with proper bullet/number styles

Browse Source 
Tailwind's preflight resets list-style to none on ul/ol elements.
Add explicit list-style-type rules for markdown-body: disc for ul,
decimal for ol, with circle/square for nested levels.
Also add li margin for spacing.

Closes feedback #61
This commit is contained in:
Nicolas Varrot
2026-02-13 09:40:22 +00:00
parent a64a235d6c
commit cbb46115a0
2 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
FEEDBACK.md
View File

@@ -661,5 +661,5 @@
## Item #61
- **Date:** 2026-02-13
- **Priority:** medium
- **Status:** pending
- **Status:** in-progress
- **Description:** Markdown unordered lists (- item, * item) are not rendered properly in chat messages. They appear as raw text instead of formatted bullet points. Need to verify remarkGfm/ReactMarkdown config handles list rendering correctly, and ensure CSS styles are applied for ul/ol elements in the markdown-body class.

6
src/index.css
View File

@@ -167,6 +167,12 @@ html, body {
.markdown-body p { margin: 4px 0; }
.markdown-body ul, .markdown-body ol { margin: 4px 0; padding-left: 20px; }
.markdown-body ul { list-style-type: disc; }
.markdown-body ol { list-style-type: decimal; }
.markdown-body li { margin: 2px 0; }
.markdown-body li > ul, .markdown-body li > ol { margin: 2px 0; }
.markdown-body li > ul { list-style-type: circle; }
.markdown-body li > ul > li > ul { list-style-type: square; }
.markdown-body blockquote { border-left: 3px solid var(--pc-accent-dim); padding-left: 12px; margin: 8px 0; opacity: 0.8; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 12px 0 4px; }
.markdown-body a { color: var(--pc-accent-light); text-decoration: underline; }