From 392a8d7c8c7130fd0dd2237d4f36ec94f1a8c86b Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Thu, 2 Apr 2026 20:10:45 +0800
Subject: [PATCH] refactor(editor): polish typography for better visual
 hierarchy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Heading hierarchy: H1 bumped to 1.125rem with letter-spacing to
  distinguish from H2 (both were 1rem). Margins normalized to 0.5rem
  baseline rhythm.
- List items: increased spacing from 0.125rem to 0.25rem for readability.
  Remove paragraph margins inside list items (Tiptap wraps li content
  in <p> tags which inherited 0.5rem margins).
- Nested lists: bullet style progression (disc → circle → square) and
  numbering progression (decimal → lower-alpha → lower-roman).
- Blockquotes: tighter paragraph spacing inside, nested blockquotes get
  lighter border for depth indication.
- Inline code: border-radius uses semantic --radius-sm token.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/common/rich-text-editor.css    | 64 ++++++++++++++++---
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/common/rich-text-editor.css b/apps/web/components/common/rich-text-editor.css
index 110de520..4623ad93 100644
--- a/apps/web/components/common/rich-text-editor.css
+++ b/apps/web/components/common/rich-text-editor.css
@@ -18,20 +18,21 @@
   height: 0;
 }
 
-/* Headings — aligned with old Markdown minimal mode */
+/* Headings — compact hierarchy for issue tracker context */
 .rich-text-editor h1 {
-  font-size: 1rem;
+  font-size: 1.125rem;
   font-weight: 700;
-  margin-top: 1.25rem;
-  margin-bottom: 0.75rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
   line-height: 1.4;
+  letter-spacing: -0.01em;
 }
 
 .rich-text-editor h2 {
   font-size: 1rem;
   font-weight: 600;
-  margin-top: 1rem;
-  margin-bottom: 0.75rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
   line-height: 1.4;
 }
 
@@ -75,7 +76,7 @@
 }
 
 .rich-text-editor li {
-  margin: 0.125rem 0;
+  margin: 0.25rem 0;
   line-height: 1.625;
 }
 
@@ -87,6 +88,34 @@
   color: var(--muted-foreground);
 }
 
+/* Remove paragraph margins inside list items (Tiptap wraps li content in <p>) */
+.rich-text-editor li > p {
+  margin: 0;
+}
+
+.rich-text-editor li > p + p {
+  margin-top: 0.25rem;
+}
+
+/* Nested lists — bullet style progression and tighter spacing */
+.rich-text-editor ul ul {
+  list-style-type: circle;
+  margin: 0.25rem 0;
+}
+
+.rich-text-editor ul ul ul {
+  list-style-type: square;
+}
+
+.rich-text-editor ol ol {
+  list-style-type: lower-alpha;
+  margin: 0.25rem 0;
+}
+
+.rich-text-editor ol ol ol {
+  list-style-type: lower-roman;
+}
+
 /* Inline code */
 .rich-text-editor code {
   font-family: var(--font-mono, ui-monospace, monospace);
@@ -95,7 +124,7 @@
   border: 1px solid color-mix(in srgb, var(--foreground) 5%, transparent);
   color: color-mix(in srgb, var(--foreground) 75%, transparent);
   padding: 0.125rem 0.375rem;
-  border-radius: calc(var(--radius) * 0.6);
+  border-radius: var(--radius-sm);
 }
 
 /* Code blocks */
@@ -230,6 +259,25 @@
   font-style: italic;
 }
 
+.rich-text-editor blockquote p {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.rich-text-editor blockquote > *:first-child {
+  margin-top: 0;
+}
+
+.rich-text-editor blockquote > *:last-child {
+  margin-bottom: 0;
+}
+
+.rich-text-editor blockquote blockquote {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  border-left-color: color-mix(in srgb, var(--muted-foreground) 15%, transparent);
+}
+
 /* Horizontal rules */
 .rich-text-editor hr {
   border: none;