marketing-shibata50/multica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(editor): polish typography and fix mention card alignment

Browse source 
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>
This commit is contained in:
Naiyuan Qing 2026-04-03 10:29:41 +08:00
parent 27e58d91af
commit d9a6b8c8ed
2 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

24
apps/web/features/editor/content-editor.css
View file

@ -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;
}