From 4829303cfa0b55499389d029fca993ec0a304fee Mon Sep 17 00:00:00 2001
From: Cody De Arkland <codydearkland@gmail.com>
Date: Wed, 10 Sep 2025 21:04:19 -0700
Subject: [PATCH 1/2] fix(toc): prevent right ToC from shrinking; enforce 250px
 min width

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

diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx
index 301fb6d452b3d3..e7b796267f14e0 100644
--- a/src/components/docPage/index.tsx
+++ b/src/components/docPage/index.tsx
@@ -117,7 +117,7 @@ export function DocPage({
         {hasToc && (
           <aside
             data-layout-anchor="right"
-            className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden toc:block w-[250px]"
+            className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden toc:block flex-none w-[250px] min-w-[250px]"
           >
             <div className="sidebar">
               <SidebarTableOfContents />

From 02c08dfbb67804fd83c5f831c1e5c9ff2f6f6f03 Mon Sep 17 00:00:00 2001
From: Cody De Arkland <codydearkland@gmail.com>
Date: Wed, 10 Sep 2025 21:46:26 -0700
Subject: [PATCH 2/2] style(code): wrap long lines in code blocks; allow main
 content to shrink (min-w-0)

---
 src/components/codeBlock/code-blocks.module.scss | 14 ++++++++++++++
 src/components/docPage/index.tsx                 |  4 +++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss
index f77d00e30cc01e..6141d51d990e3a 100644
--- a/src/components/codeBlock/code-blocks.module.scss
+++ b/src/components/codeBlock/code-blocks.module.scss
@@ -8,6 +8,12 @@
     border-radius: 0 0 6px 6px;
     margin-top: 0;
     margin-bottom: 0;
+    /* Wrap overly long lines so blocks never expand layout */
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    max-width: 100%;
+    tab-size: 2;
   }
 
   code[class*='language-'],
@@ -20,6 +26,10 @@
     border: 1px solid var(--accent-11);
     border-radius: 6px;
     margin: 0;
+    /* Ensure syntax-highlighted pre behaves like above */
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
   }
 
   /**
@@ -66,6 +76,10 @@
     float: left;
     min-width: 100%;
     box-sizing: border-box;
+    /* Allow wrapping inside each highlighted line */
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
     // Set placeholder for highlight accent border color to transparent
     border-left: 4px solid rgba(0, 0, 0, 0);
 
diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx
index e7b796267f14e0..51e1c7fb995dab 100644
--- a/src/components/docPage/index.tsx
+++ b/src/components/docPage/index.tsx
@@ -76,7 +76,9 @@ export function DocPage({
               'prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-normal prose-blockquote:text-[var(--gray-12)]',
               'prose-img:my-2',
               'prose-strong:text-[var(--gray-12)]',
-              fullWidth ? 'max-w-none w-full' : 'w-full',
+              // Allow flex item to shrink within layout; prevents long content from
+              // forcing the main column to grow and squeezing the ToC
+              fullWidth ? 'max-w-none w-full min-w-0' : 'w-full min-w-0',
             ].join(' ')}
             id="doc-content"
           >