From 47a0b5726dfe79047e9a9b525f7f3566d3f60242 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Fri, 13 Mar 2026 09:06:44 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Adjust=20editor=20styles?=
 =?UTF-8?q?=20to=20prevent=20content=20overflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json     | 10 +++++++++-
 styles/backend/editor.css | 36 ++++++++++++++++++++++++++++++++++++
 whitelist.php             |  2 ++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index de385f1..91454e0 100644
--- a/.vscode/settings.json
+++ b/.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"
   }
 }
diff --git a/styles/backend/editor.css b/styles/backend/editor.css
index 9fa735b..4c22fb9 100644
--- a/styles/backend/editor.css
+++ b/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;
diff --git a/whitelist.php b/whitelist.php
index 8715b3b..5748c62 100644
--- a/whitelist.php
+++ b/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>