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:
parent
8845baf402
commit
569a124d02
2 changed files with 71 additions and 10 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue