style: move editor padding to block elements for better drag handle interaction

- 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>
This commit is contained in:
Justin Edmund 2025-06-26 10:11:43 -04:00
parent 8845baf402
commit 569a124d02
2 changed files with 71 additions and 10 deletions

View file

@ -353,7 +353,7 @@
.edra-editor { .edra-editor {
flex: 1; flex: 1;
width: 100%; width: 100%;
padding: $unit-4x; padding: $unit-4x 0;
min-height: 100px; min-height: 100px;
outline: none; outline: none;
overflow-y: auto; overflow-y: auto;
@ -364,10 +364,10 @@
// More generous padding for full variant // More generous padding for full variant
.composer--full & { .composer--full & {
padding: $unit-4x $unit-6x; padding: $unit-4x 0;
@include breakpoint('phone') { @include breakpoint('phone') {
padding: $unit-3x $unit-4x; padding: $unit-3x 0;
} }
} }
} }

View file

@ -12,12 +12,21 @@
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
line-height: 1.6; line-height: 1.6;
padding-left: 3rem;
padding-right: 3rem;
} }
.tiptap p:last-child { .tiptap p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@media (max-width: 768px) {
.tiptap p {
padding-left: 2rem;
padding-right: 2rem;
}
}
/* For Placeholder */ /* For Placeholder */
.tiptap .is-empty::before { .tiptap .is-empty::before {
pointer-events: none; pointer-events: none;
@ -38,6 +47,8 @@
margin-top: 1.5rem; margin-top: 1.5rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
text-wrap: pretty; text-wrap: pretty;
padding-left: 3rem;
padding-right: 3rem;
} }
.tiptap h1, .tiptap h1,
@ -56,6 +67,18 @@
margin-top: 1.5rem; 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 { .tiptap h1 {
font-size: 2rem; font-size: 2rem;
} }
@ -79,13 +102,20 @@
border-left: 0.5rem solid var(--blockquote-border); border-left: 0.5rem solid var(--blockquote-border);
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--code-bg); background-color: var(--code-bg);
margin: 1rem 0; margin: 1rem 3rem;
padding: 0.5rem 0; padding: 0.5rem 1rem;
padding-left: 1rem; }
@media (max-width: 768px) {
.tiptap blockquote {
margin: 1rem 2rem;
}
} }
.tiptap blockquote p { .tiptap blockquote p {
margin: 0; margin: 0;
padding-left: 0;
padding-right: 0;
} }
.tiptap blockquote p:not(:last-child) { .tiptap blockquote p:not(:last-child) {
@ -96,7 +126,13 @@
.tiptap hr { .tiptap hr {
border: none; border: none;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
margin: 1rem 0; margin: 1rem 3rem;
}
@media (max-width: 768px) {
.tiptap hr {
margin: 1rem 2rem;
}
} }
/* Inline Code */ /* Inline Code */
@ -115,9 +151,19 @@
.tiptap ol { .tiptap ol {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
margin-left: 3rem;
margin-right: 3rem;
padding-left: 1.5rem; padding-left: 1.5rem;
} }
@media (max-width: 768px) {
.tiptap ul,
.tiptap ol {
margin-left: 2rem;
margin-right: 2rem;
}
}
.tiptap ul li, .tiptap ul li,
.tiptap ol li { .tiptap ol li {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
@ -127,6 +173,8 @@
.tiptap ol li p { .tiptap ol li p {
margin-top: 0; margin-top: 0;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
padding-left: 0;
padding-right: 0;
} }
.tiptap ul li:last-child, .tiptap ul li:last-child,
@ -295,11 +343,17 @@ input[type='checkbox'] {
/* Table Styling */ /* Table Styling */
.ProseMirror .tableWrapper { .ProseMirror .tableWrapper {
margin: 0; margin: 0 3rem 1rem 3rem;
overflow: auto; overflow: auto;
padding: 1rem; padding: 1rem;
} }
@media (max-width: 768px) {
.ProseMirror .tableWrapper {
margin: 0 2rem 1rem 2rem;
}
}
.ProseMirror table { .ProseMirror table {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -328,6 +382,8 @@ input[type='checkbox'] {
.ProseMirror table td p, .ProseMirror table td p,
.ProseMirror table th p { .ProseMirror table th p {
margin: 0; margin: 0;
padding-left: 0;
padding-right: 0;
} }
.ProseMirror table td p + p, .ProseMirror table td p + p,
@ -474,8 +530,13 @@ input[type='checkbox'] {
padding: 1.5rem; padding: 1.5rem;
position: relative; position: relative;
height: fit-content; height: fit-content;
margin-top: 0; margin: 0 3rem 1rem 3rem;
margin-bottom: 1rem; }
@media (max-width: 768px) {
.code-wrapper {
margin: 0 2rem 1rem 2rem;
}
} }
.code-wrapper-tile { .code-wrapper-tile {