From a32752ca56df5331c159869b5378e2b35cfb11ef Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 27 Oct 2026 02:54:10 +0000
Subject: [PATCH 1/2] docs: Keep DiffEditor's loading diff from spilling over
 the content below

While Monaco loads, the static Before/After diff sat in a box sized to
Monaco's line-count estimate. It wraps and has title bars, so it ran
taller and overlapped the next block (e.g. the EndpointPlayground on the
axios migration guide). Let the box keep the static diff's height until
Monaco mounts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Y5C5ZEUUH2iiB6z6TPiTPc
---
 website/src/components/DiffEditorMonaco.tsx         | 4 +++-
 website/src/components/Playground/styles.module.css | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/website/src/components/DiffEditorMonaco.tsx b/website/src/components/DiffEditorMonaco.tsx
index d675f51316f2..e452a96e6ece 100644
--- a/website/src/components/DiffEditorMonaco.tsx
+++ b/website/src/components/DiffEditorMonaco.tsx
@@ -113,7 +113,9 @@ export default function DiffEditor({ sides, fallback }: DiffMonacoProps) {
                     onMount={handleDiffMount}
                     height={height}
                     theme={MONACO_THEME}
-                    loading={fallback}
+                    loading={
+                      <div className={styles.diffLoading}>{fallback}</div>
+                    }
                     // Prevent "TextModel got disposed before DiffEditorWidget model got reset" error
                     // by not letting @monaco-editor/react manage model disposal
                     keepCurrentOriginalModel
diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css
index 5ee9547132eb..55b50d79d5a5 100644
--- a/website/src/components/Playground/styles.module.css
+++ b/website/src/components/Playground/styles.module.css
@@ -1457,6 +1457,11 @@ div.fixtureJson + div.fixtureJson {
 .playgroundEditor > section {
   position: auto !important;
 }
+/* The section's inline height is Monaco's estimate; the static diff shown
+   while it loads wraps and has title bars, so let it keep its own height */
+.playgroundEditor > section:has(> div > .diffLoading) {
+  height: auto !important;
+}
 
 /* Side by side when the playground itself has enough width (docs sidebar
    no longer forces an incorrect stack on homepage/blog): a grid, the file

From d94c99080a0187100067e924bc319881c07b67de Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 27 Oct 2026 02:57:19 +0000
Subject: [PATCH 2/2] docs: Don't tie the DiffEditor loading rule to Monaco's
 wrapper depth

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Y5C5ZEUUH2iiB6z6TPiTPc
---
 website/src/components/DiffEditorMonaco.tsx         | 1 +
 website/src/components/Playground/styles.module.css | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/components/DiffEditorMonaco.tsx b/website/src/components/DiffEditorMonaco.tsx
index e452a96e6ece..dfb65a1bd32f 100644
--- a/website/src/components/DiffEditorMonaco.tsx
+++ b/website/src/components/DiffEditorMonaco.tsx
@@ -113,6 +113,7 @@ export default function DiffEditor({ sides, fallback }: DiffMonacoProps) {
                     onMount={handleDiffMount}
                     height={height}
                     theme={MONACO_THEME}
+                    // diffLoading lets the loading box take the static diff's height
                     loading={
                       <div className={styles.diffLoading}>{fallback}</div>
                     }
diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css
index 55b50d79d5a5..762fbb6d215c 100644
--- a/website/src/components/Playground/styles.module.css
+++ b/website/src/components/Playground/styles.module.css
@@ -1459,7 +1459,7 @@ div.fixtureJson + div.fixtureJson {
 }
 /* The section's inline height is Monaco's estimate; the static diff shown
    while it loads wraps and has title bars, so let it keep its own height */
-.playgroundEditor > section:has(> div > .diffLoading) {
+.playgroundEditor > section:has(.diffLoading) {
   height: auto !important;
 }