From 5a5549fc5458362177c6d0fb6f18042013e8d54c Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 3 Mar 2026 08:39:56 -0600
Subject: [PATCH] feat(ui): improve markdown typography with better paragraph
 spacing and line height

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>
---
 ui/src/components/MarkdownBody.tsx | 4 ++--
 ui/src/index.css                   | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/MarkdownBody.tsx b/ui/src/components/MarkdownBody.tsx
index 2a2ce11..7ebd77c 100644
--- a/ui/src/components/MarkdownBody.tsx
+++ b/ui/src/components/MarkdownBody.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties } from "react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { parseProjectMentionHref } from "@paperclip/shared";
+import { parseProjectMentionHref } from "@paperclipai/shared";
 import { cn } from "../lib/utils";
 import { useTheme } from "../context/ThemeContext";
 
@@ -38,7 +38,7 @@ export function MarkdownBody({ children, className }: MarkdownBodyProps) {
   return (
     <div
       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",
         className,
       )}
diff --git a/ui/src/index.css b/ui/src/index.css
index 76e4e8d..6026dc5 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -306,10 +306,11 @@
 
 .paperclip-mdxeditor-content p {
   margin: 0;
+  line-height: 1.4;
 }
 
 .paperclip-mdxeditor-content p + p {
-  margin-top: 0.4rem;
+  margin-top: 0.6rem;
 }
 
 .paperclip-mdxeditor-content a.paperclip-project-mention-chip {
@@ -345,6 +346,7 @@
 .paperclip-mdxeditor-content li {
   display: list-item;
   margin: 0.15rem 0;
+  line-height: 1.4;
 }
 
 .paperclip-mdxeditor-content li::marker {
@@ -368,6 +370,7 @@
   padding-left: 0.7rem;
   border-left: 2px solid var(--border);
   color: var(--muted-foreground);
+  line-height: 1.4;
 }
 
 .paperclip-mdxeditor-content code {