From 3a3249bd40fd089f7ec498bca5f30931cf7a54e8 Mon Sep 17 00:00:00 2001
From: Nathaniel Tucker <me@ntucker.me>
Date: Tue, 27 Oct 2026 03:01:38 +0000
Subject: [PATCH] docs: Keep DiffEditor's loading diff from spilling over the
 content below (#4491)

* 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

* 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

---------

Co-authored-by: Claude <noreply@anthropic.com>
Maintenance-only: ported from master (25dfbcc56273626c5ba05991ba7b7e8d1568a946)
---
 website/src/components/DiffEditorMonaco.tsx         | 5 ++++-
 website/src/components/Playground/styles.module.css | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/website/src/components/DiffEditorMonaco.tsx b/website/src/components/DiffEditorMonaco.tsx
index d675f51316f2..dfb65a1bd32f 100644
--- a/website/src/components/DiffEditorMonaco.tsx
+++ b/website/src/components/DiffEditorMonaco.tsx
@@ -113,7 +113,10 @@ export default function DiffEditor({ sides, fallback }: DiffMonacoProps) {
                     onMount={handleDiffMount}
                     height={height}
                     theme={MONACO_THEME}
-                    loading={fallback}
+                    // diffLoading lets the loading box take the static diff's height
+                    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 4a0899311712..098bb542c88e 100644
--- a/website/src/components/Playground/styles.module.css
+++ b/website/src/components/Playground/styles.module.css
@@ -777,6 +777,11 @@ 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(.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). */