From 569a124d02a8eb47b0d86145abf58be1aa537fdb Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 10:11:43 -0400
Subject: [PATCH] style: move editor padding to block elements for better drag
 handle interaction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove horizontal padding from editor container
- Add 3rem (2rem on mobile) horizontal padding to all block elements
- Ensures drag handle appears when hovering over visual margins
- Properly handle nested elements (blockquotes, lists, tables) to prevent double padding

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../admin/composer/ComposerCore.svelte        |  6 +-
 src/lib/components/edra/editor.css            | 75 +++++++++++++++++--
 2 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/admin/composer/ComposerCore.svelte b/src/lib/components/admin/composer/ComposerCore.svelte
index e7e4108..5856c19 100644
--- a/src/lib/components/admin/composer/ComposerCore.svelte
+++ b/src/lib/components/admin/composer/ComposerCore.svelte
@@ -353,7 +353,7 @@
 	.edra-editor {
 		flex: 1;
 		width: 100%;
-		padding: $unit-4x;
+		padding: $unit-4x 0;
 		min-height: 100px;
 		outline: none;
 		overflow-y: auto;
@@ -364,10 +364,10 @@
 
 		// More generous padding for full variant
 		.composer--full & {
-			padding: $unit-4x $unit-6x;
+			padding: $unit-4x 0;
 			
 			@include breakpoint('phone') {
-				padding: $unit-3x $unit-4x;
+				padding: $unit-3x 0;
 			}
 		}
 	}
diff --git a/src/lib/components/edra/editor.css b/src/lib/components/edra/editor.css
index ba42f1f..4033ef9 100644
--- a/src/lib/components/edra/editor.css
+++ b/src/lib/components/edra/editor.css
@@ -12,12 +12,21 @@
 	margin-top: 0;
 	margin-bottom: 1rem;
 	line-height: 1.6;
+	padding-left: 3rem;
+	padding-right: 3rem;
 }
 
 .tiptap p:last-child {
 	margin-bottom: 0;
 }
 
+@media (max-width: 768px) {
+	.tiptap p {
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+}
+
 /* For Placeholder */
 .tiptap .is-empty::before {
 	pointer-events: none;
@@ -38,6 +47,8 @@
 	margin-top: 1.5rem;
 	margin-bottom: 0.75rem;
 	text-wrap: pretty;
+	padding-left: 3rem;
+	padding-right: 3rem;
 }
 
 .tiptap h1,
@@ -56,6 +67,18 @@
 	margin-top: 1.5rem;
 }
 
+@media (max-width: 768px) {
+	.tiptap h1,
+	.tiptap h2,
+	.tiptap h3,
+	.tiptap h4,
+	.tiptap h5,
+	.tiptap h6 {
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+}
+
 .tiptap h1 {
 	font-size: 2rem;
 }
@@ -79,13 +102,20 @@
 	border-left: 0.5rem solid var(--blockquote-border);
 	border-radius: 0.5rem;
 	background-color: var(--code-bg);
-	margin: 1rem 0;
-	padding: 0.5rem 0;
-	padding-left: 1rem;
+	margin: 1rem 3rem;
+	padding: 0.5rem 1rem;
+}
+
+@media (max-width: 768px) {
+	.tiptap blockquote {
+		margin: 1rem 2rem;
+	}
 }
 
 .tiptap blockquote p {
 	margin: 0;
+	padding-left: 0;
+	padding-right: 0;
 }
 
 .tiptap blockquote p:not(:last-child) {
@@ -96,7 +126,13 @@
 .tiptap hr {
 	border: none;
 	border-top: 1px solid var(--border-color);
-	margin: 1rem 0;
+	margin: 1rem 3rem;
+}
+
+@media (max-width: 768px) {
+	.tiptap hr {
+		margin: 1rem 2rem;
+	}
 }
 
 /* Inline Code */
@@ -115,9 +151,19 @@
 .tiptap ol {
 	margin-top: 0;
 	margin-bottom: 1rem;
+	margin-left: 3rem;
+	margin-right: 3rem;
 	padding-left: 1.5rem;
 }
 
+@media (max-width: 768px) {
+	.tiptap ul,
+	.tiptap ol {
+		margin-left: 2rem;
+		margin-right: 2rem;
+	}
+}
+
 .tiptap ul li,
 .tiptap ol li {
 	margin-bottom: 0.25rem;
@@ -127,6 +173,8 @@
 .tiptap ol li p {
 	margin-top: 0;
 	margin-bottom: 0.25rem;
+	padding-left: 0;
+	padding-right: 0;
 }
 
 .tiptap ul li:last-child,
@@ -295,11 +343,17 @@ input[type='checkbox'] {
 
 /* Table Styling */
 .ProseMirror .tableWrapper {
-	margin: 0;
+	margin: 0 3rem 1rem 3rem;
 	overflow: auto;
 	padding: 1rem;
 }
 
+@media (max-width: 768px) {
+	.ProseMirror .tableWrapper {
+		margin: 0 2rem 1rem 2rem;
+	}
+}
+
 .ProseMirror table {
 	margin-top: 1rem;
 	margin-bottom: 1rem;
@@ -328,6 +382,8 @@ input[type='checkbox'] {
 .ProseMirror table td p,
 .ProseMirror table th p {
 	margin: 0;
+	padding-left: 0;
+	padding-right: 0;
 }
 
 .ProseMirror table td p + p,
@@ -474,8 +530,13 @@ input[type='checkbox'] {
 	padding: 1.5rem;
 	position: relative;
 	height: fit-content;
-	margin-top: 0;
-	margin-bottom: 1rem;
+	margin: 0 3rem 1rem 3rem;
+}
+
+@media (max-width: 768px) {
+	.code-wrapper {
+		margin: 0 2rem 1rem 2rem;
+	}
 }
 
 .code-wrapper-tile {