From 8373cde0aee08c0e5e0d36c01a6583c6361a12c3 Mon Sep 17 00:00:00 2001
From: Greg Holmes <iam@gregholmes.co.uk>
Date: Mon, 22 Dec 2025 16:52:09 +0000
Subject: [PATCH 1/2] fix: prevent horizontal overflow in vertical layout
 examples

---
 src/components/Examples/ExamplesRenderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Examples/ExamplesRenderer.tsx b/src/components/Examples/ExamplesRenderer.tsx
index 2feef2e88c..706abca643 100644
--- a/src/components/Examples/ExamplesRenderer.tsx
+++ b/src/components/Examples/ExamplesRenderer.tsx
@@ -161,7 +161,7 @@ const ExamplesRenderer = ({
         </div>
         <div
           className={cn(
-            'flex flex-col gap-4 max-w-[calc(100vw-64px)]',
+            'flex flex-col gap-4 max-w-[calc(100vw-64px)] overflow-hidden',
             isVerticalLayout && 'md:flex-row',
             isLargeLayout && 'md:flex-col',
           )}

From d1263e9c693856671c35e56cdf3dcc5de7994f8a Mon Sep 17 00:00:00 2001
From: Greg Holmes <iam@gregholmes.co.uk>
Date: Mon, 22 Dec 2025 17:36:01 +0000
Subject: [PATCH 2/2] fix: constrain code editor width in vertical layout
 examples

Wrap CodeEditor in a flex container with min-w-0 and overflow-hidden
to prevent content from expanding beyond available space. Set fixed
width on preview container to ensure proper flex distribution.
---
 src/components/Examples/ExamplesRenderer.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Examples/ExamplesRenderer.tsx b/src/components/Examples/ExamplesRenderer.tsx
index 706abca643..49b8c764cb 100644
--- a/src/components/Examples/ExamplesRenderer.tsx
+++ b/src/components/Examples/ExamplesRenderer.tsx
@@ -166,17 +166,19 @@ const ExamplesRenderer = ({
             isLargeLayout && 'md:flex-col',
           )}
         >
-          <CodeEditor
-            theme="light"
-            editor={{
-              className: '',
-              showLineNumbers: true,
-            }}
-          />
+          <div className={cn('min-w-0 overflow-hidden', isVerticalLayout && 'md:flex-1')}>
+            <CodeEditor
+              theme="light"
+              editor={{
+                className: '',
+                showLineNumbers: true,
+              }}
+            />
+          </div>
           <div
             className={cn(
               'flex gap-4 flex-col sm:flex-row',
-              isVerticalLayout && 'md:flex-col',
+              isVerticalLayout && 'md:flex-col md:w-[21.875rem] md:flex-shrink-0',
               isLargeLayout && 'md:flex-row md:justify-center md:h-fit md:min-h-[700px] h-[400px]',
             )}
           >