hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): improve markdown typography with better paragraph spacing and line height

Browse Source 
Increase paragraph margins, add line-height: 1.4 to paragraphs/lists/blockquotes,
and bump inter-paragraph spacing in the MDXEditor for more readable markdown blocks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
2026-03-03 08:39:56 -06:00
parent e9ba0418c3
commit 5a5549fc54
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/MarkdownBody.tsx
View File

@@ -1,7 +1,7 @@
import type { CSSProperties } from "react"; import type { CSSProperties } from "react";
import Markdown from "react-markdown"; import Markdown from "react-markdown";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import { parseProjectMentionHref } from "@paperclip/shared"; import { parseProjectMentionHref } from "@paperclipai/shared";
import { cn } from "../lib/utils"; import { cn } from "../lib/utils";
import { useTheme } from "../context/ThemeContext"; import { useTheme } from "../context/ThemeContext";
@@ -38,7 +38,7 @@ export function MarkdownBody({ children, className }: MarkdownBodyProps) {
return ( return (
<div <div
className={cn( className={cn(
"prose prose-sm max-w-none prose-p:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0 prose-pre:my-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-headings:my-2 prose-headings:text-sm prose-table:my-2 prose-th:px-3 prose-th:py-1.5 prose-td:px-3 prose-td:py-1.5 prose-code:break-all", "prose prose-sm max-w-none prose-p:my-2 prose-p:leading-[1.4] prose-ul:my-1.5 prose-ol:my-1.5 prose-li:my-0.5 prose-li:leading-[1.4] prose-pre:my-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-headings:my-2 prose-headings:text-sm prose-blockquote:leading-[1.4] prose-table:my-2 prose-th:px-3 prose-th:py-1.5 prose-td:px-3 prose-td:py-1.5 prose-code:break-all",
theme === "dark" && "prose-invert", theme === "dark" && "prose-invert",
className, className,
)} )}

5
ui/src/index.css
View File

@@ -306,10 +306,11 @@
.paperclip-mdxeditor-content p { .paperclip-mdxeditor-content p {
margin: 0; margin: 0;
line-height: 1.4;
} }
.paperclip-mdxeditor-content p + p { .paperclip-mdxeditor-content p + p {
margin-top: 0.4rem; margin-top: 0.6rem;
} }
.paperclip-mdxeditor-content a.paperclip-project-mention-chip { .paperclip-mdxeditor-content a.paperclip-project-mention-chip {
@@ -345,6 +346,7 @@
.paperclip-mdxeditor-content li { .paperclip-mdxeditor-content li {
display: list-item; display: list-item;
margin: 0.15rem 0; margin: 0.15rem 0;
line-height: 1.4;
} }
.paperclip-mdxeditor-content li::marker { .paperclip-mdxeditor-content li::marker {
@@ -368,6 +370,7 @@
padding-left: 0.7rem; padding-left: 0.7rem;
border-left: 2px solid var(--border); border-left: 2px solid var(--border);
color: var(--muted-foreground); color: var(--muted-foreground);
line-height: 1.4;
} }
.paperclip-mdxeditor-content code { .paperclip-mdxeditor-content code {