From 8845baf40249b62c539bf07d7d28cfe187274446 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 10:07:54 -0400
Subject: [PATCH] style: improve editor block spacing for better readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add 1rem bottom margin to paragraphs
- Increase heading margins and add contextual spacing
- Add proper spacing for lists and list items
- Ensure code blocks have consistent bottom margin
- Add line-height of 1.6 for better paragraph readability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/edra/editor.css | 53 +++++++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/edra/editor.css b/src/lib/components/edra/editor.css
index 175c4f0..ba42f1f 100644
--- a/src/lib/components/edra/editor.css
+++ b/src/lib/components/edra/editor.css
@@ -7,6 +7,17 @@
 	margin-top: 0;
 }
 
+/* Paragraph spacing */
+.tiptap p {
+	margin-top: 0;
+	margin-bottom: 1rem;
+	line-height: 1.6;
+}
+
+.tiptap p:last-child {
+	margin-bottom: 0;
+}
+
 /* For Placeholder */
 .tiptap .is-empty::before {
 	pointer-events: none;
@@ -24,16 +35,27 @@
 .tiptap h5,
 .tiptap h6 {
 	line-height: 1.2;
-	margin-top: 1rem;
+	margin-top: 1.5rem;
+	margin-bottom: 0.75rem;
 	text-wrap: pretty;
 }
 
 .tiptap h1,
 .tiptap h2 {
-	margin-top: 1rem;
+	margin-top: 2rem;
 	margin-bottom: 1rem;
 }
 
+/* Reduce top margin for headings that immediately follow other elements */
+.tiptap p + h1,
+.tiptap p + h2,
+.tiptap p + h3,
+.tiptap p + h4,
+.tiptap p + h5,
+.tiptap p + h6 {
+	margin-top: 1.5rem;
+}
+
 .tiptap h1 {
 	font-size: 2rem;
 }
@@ -66,6 +88,10 @@
 	margin: 0;
 }
 
+.tiptap blockquote p:not(:last-child) {
+	margin-bottom: 0.5rem;
+}
+
 /* Horizontal Rule */
 .tiptap hr {
 	border: none;
@@ -85,10 +111,27 @@
 
 
 /* List Styling */
+.tiptap ul,
+.tiptap ol {
+	margin-top: 0;
+	margin-bottom: 1rem;
+	padding-left: 1.5rem;
+}
+
+.tiptap ul li,
+.tiptap ol li {
+	margin-bottom: 0.25rem;
+}
+
 .tiptap ul li p,
 .tiptap ol li p {
-	margin-top: 0.25em;
-	margin-bottom: 0.25em;
+	margin-top: 0;
+	margin-bottom: 0.25rem;
+}
+
+.tiptap ul li:last-child,
+.tiptap ol li:last-child {
+	margin-bottom: 0;
 }
 
 /* Task List Styling */
@@ -431,6 +474,8 @@ input[type='checkbox'] {
 	padding: 1.5rem;
 	position: relative;
 	height: fit-content;
+	margin-top: 0;
+	margin-bottom: 1rem;
 }
 
 .code-wrapper-tile {