🐞 fix: Adjust editor styles to prevent content overflow

.vscode/settings.json

@@ -3,6 +3,14 @@
     "tree.indentGuidesStroke": "#3d92ec",
     "activityBar.background": "#213309",
     "titleBar.activeBackground": "#2E470C",
-    "titleBar.activeForeground": "#F6FCEE"
+    "titleBar.activeForeground": "#F6FCEE",
+    "titleBar.inactiveBackground": "#213209",
+    "titleBar.inactiveForeground": "#F7FCEF",
+    "statusBar.background": "#213209",
+    "statusBar.foreground": "#F7FCEF",
+    "statusBar.debuggingBackground": "#213209",
+    "statusBar.debuggingForeground": "#F7FCEF",
+    "statusBar.noFolderBackground": "#213209",
+    "statusBar.noFolderForeground": "#F7FCEF"
   }
 }

styles/backend/editor.css

@@ -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;

whitelist.php

@@ -130,3 +130,5 @@ namespace BasicWP;
 <span class="2xl:col-span-6"></span>
 <span class="2xl:col-span-7"></span>
 <span class="2xl:col-span-8"></span>
+<span class="mx-auto"></span>
+<span class="rounded-lg"></span>