From d9a6b8c8ed041a8fe9641ba3bde9cb13734ae453 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 3 Apr 2026 10:29:41 +0800
Subject: [PATCH] refactor(editor): polish typography and fix mention card
 alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Typography adjustments based on GitHub/Tailwind prose research:
- Heading sizes: h1 22px, h2 18px, h3 15px (was 18/16/14 — h3 was
  indistinguishable from body text)
- Paragraph spacing: 10px (was 8px)
- List indentation: 20px for ul (was 16px)
- Code block margin: 12px (was 8px)
- Blockquote border: 3px (was 2px)

Issue mention card fixes:
- Vertical alignment: align-text-bottom (was align-middle, caused
  upward shift)
- Internal gap: gap-2 (was gap-1.5)
- Horizontal padding: px-2.5 (was px-2)
- External margin: mx-0.5 for breathing room with surrounding text

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/web/features/editor/content-editor.css   | 24 +++++++++----------
 .../editor/extensions/mention-view.tsx        |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/web/features/editor/content-editor.css b/apps/web/features/editor/content-editor.css
index 4623ad93..1db9466f 100644
--- a/apps/web/features/editor/content-editor.css
+++ b/apps/web/features/editor/content-editor.css
@@ -18,26 +18,26 @@
   height: 0;
 }
 
-/* Headings — compact hierarchy for issue tracker context */
+/* Headings — compact but with clear visual hierarchy */
 .rich-text-editor h1 {
-  font-size: 1.125rem;
+  font-size: 1.375rem;
   font-weight: 700;
   margin-top: 1.5rem;
   margin-bottom: 0.5rem;
-  line-height: 1.4;
+  line-height: 1.3;
   letter-spacing: -0.01em;
 }
 
 .rich-text-editor h2 {
-  font-size: 1rem;
+  font-size: 1.125rem;
   font-weight: 600;
   margin-top: 1.5rem;
   margin-bottom: 0.5rem;
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
 .rich-text-editor h3 {
-  font-size: 0.875rem;
+  font-size: 0.9375rem;
   font-weight: 600;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
@@ -46,8 +46,8 @@
 
 /* Paragraphs */
 .rich-text-editor p {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
   line-height: 1.625;
 }
 
@@ -64,7 +64,7 @@
 /* Lists */
 .rich-text-editor ul {
   list-style-type: disc;
-  padding-inline-start: 1rem;
+  padding-inline-start: 1.25rem;
   padding-inline-end: 0.5rem;
   margin: 0.5rem 0;
 }
@@ -133,7 +133,7 @@
   background: var(--muted);
   border-radius: var(--radius);
   padding: 0.75rem 1rem;
-  margin: 0.5rem 0;
+  margin: 0.75rem 0;
   overflow-x: auto;
 }
 
@@ -252,9 +252,9 @@
 
 /* Blockquotes */
 .rich-text-editor blockquote {
-  border-left: 2px solid color-mix(in srgb, var(--muted-foreground) 30%, transparent);
+  border-left: 3px solid color-mix(in srgb, var(--muted-foreground) 30%, transparent);
   padding-left: 0.75rem;
-  margin: 0.5rem 0;
+  margin: 0.625rem 0;
   color: var(--muted-foreground);
   font-style: italic;
 }
diff --git a/apps/web/features/editor/extensions/mention-view.tsx b/apps/web/features/editor/extensions/mention-view.tsx
index d90c1d43..126e80fd 100644
--- a/apps/web/features/editor/extensions/mention-view.tsx
+++ b/apps/web/features/editor/extensions/mention-view.tsx
@@ -54,7 +54,7 @@ function IssueMention({
     <a
       href={`/issues/${issueId}`}
       onClick={handleClick}
-      className="issue-mention inline-flex items-center align-middle gap-1.5 rounded-md border px-2 py-0.5 text-sm hover:bg-accent transition-colors cursor-pointer"
+      className="issue-mention inline-flex items-center align-text-bottom gap-2 rounded-md border mx-0.5 px-2.5 py-0.5 text-sm hover:bg-accent transition-colors cursor-pointer"
     >
       <StatusIcon status={issue.status} className="h-3.5 w-3.5" />
       <span className="font-medium text-muted-foreground">{issue.identifier}</span>