🐞 fix: Adjust editor styles to prevent content overflow

This commit is contained in:
Keith Solomon
2026-03-13 09:06:44 -05:00
parent 9bde54a41c
commit 47a0b5726d
3 changed files with 47 additions and 1 deletions
+36
View File
@@ -2,6 +2,10 @@
@import "../../static/dist/theme.css";
:root {
--vdi-editor-gutter: clamp(1rem, 4vw, 3rem);
}
body {
font-family: var(--font-sans);
@@ -13,6 +17,38 @@ body {
}
}
.editor-styles-wrapper.is-root-container,
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container,
.editor-styles-wrapper .wp-block-post-content,
.editor-visual-editor__post-title-wrapper {
box-sizing: border-box;
margin-inline: auto;
max-width: min(100%, var(--wp--style--global--wide-size, 1536px));
padding-inline: var(--vdi-editor-gutter);
width: 100%;
}
.editor-styles-wrapper .alignfull,
.editor-styles-wrapper .mx-break-out {
margin-left: calc(var(--vdi-editor-gutter) * -1);
margin-right: calc(var(--vdi-editor-gutter) * -1);
max-width: none;
width: calc(100% + (var(--vdi-editor-gutter) * 2));
}
.editor-styles-wrapper .ml-break-out {
margin-left: calc(var(--vdi-editor-gutter) * -1);
max-width: none;
width: calc(100% + var(--vdi-editor-gutter));
}
.editor-styles-wrapper .mr-break-out {
margin-left: 0;
margin-right: calc(var(--vdi-editor-gutter) * -1);
max-width: none;
width: calc(100% + var(--vdi-editor-gutter));
}
.wp-block-buttons .block-editor-block-list__layout {
display: flex;
gap: 1rem;