fix(toc): prevent right ToC from shrinking; enforce 250px min width (#14872)

fix(toc): prevent right ToC from shrinking; enforce 250px min width

Context
- Right-hand ToC width (set to 250px) was shrinking in the flex layout
between the 'toc' breakpoint (1490px) and the ultra-wide breakpoint
(2057px), especially visible when Session Replay UI alters available
width.
- Additionally, some pages had extremely long, unbroken content inside
code blocks (e.g., long URLs/paths/tokens). When code options changed,
these long lines could expand the content column and indirectly squeeze
the ToC.

Changes
- ToC: Make the <aside> a non-shrinking flex item and enforce a minimum
width.
- Updated `src/components/docPage/index.tsx` ToC aside classes from
`hidden toc:block w-[250px]` to `hidden toc:block flex-none w-[250px]
min-w-[250px]`.
- Code wrapping: Wrap long lines inside code blocks so they don’t expand
layout.
  - Updated `src/components/codeBlock/code-blocks.module.scss` to apply:
- `white-space: pre-wrap;`, `word-break: break-word;`, `overflow-wrap:
anywhere;` on `pre` and `pre[class*='language-']`.
- Same wrapping rules on `.code-line` to preserve highlight behavior.
    - `max-width: 100%;` and `tab-size: 2;` on `pre`.
- Main content flex: Allow the main content column to shrink within the
flex layout.
- Added `min-w-0` to the `#doc-content` container in
`src/components/docPage/index.tsx`.

Result
- When the ToC is visible, it remains a fixed 250px and does not
compress due to layout shifts.
- Long code no longer forces the content area to expand; lines wrap
within the available width.
- Existing responsive behavior remains unchanged: ToC hidden below the
`toc` breakpoint; pinned/fixed layout ≥2057px.

Files
- `src/components/docPage/index.tsx`
- `src/components/codeBlock/code-blocks.module.scss`

Author: codyde

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

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"
           >
@@ -117,7 +119,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 />