Skip to content

docs: Keep DiffEditor's loading diff from spilling over the content below - #4491

Merged
ntucker merged 2 commits into
masterfrom
claude/project-thread-7qq44t
Oct 27, 2026
Merged

ntucker merged 2 commits into
masterfrom
claude/project-thread-7qq44t

Conversation

@ntucker

@ntucker ntucker commented Oct 27, 2026 •

Copy link
Copy Markdown
Collaborator

Requested by Nathaniel · project thread

Motivation

Bug fix. While Monaco loads (or forever, if its CDN is blocked), <DiffEditor> shows the static Before/After diff inside @monaco-editor/react's loading box. That box has a fixed inline height: Monaco's estimate (line count × line height). The static diff wraps and has title bars, so it runs taller (about 140px on the axios migration guide at 1400px) and draws over the next block. On /rest/guides/axios-migration it shows through the row tabs of the EndpointPlayground below.

Solution

While the static diff is in the loading box, the box takes the diff's own height (section:has(> div > .diffLoading) { height: auto !important }, next to the existing Monaco loading overrides). When Monaco mounts, the loading node unmounts, the selector stops matching, and Monaco's measured height applies as before. Nothing is clipped, so a page where Monaco never loads still shows the whole diff.

Rejected: a scroll box at Monaco's estimate (hides most of the diff when it never loads), and a bigger estimate (needs DOM measurement and overshoots Monaco).

Assumptions and validation

  • Headless Chromium (Monaco CDN unreachable, so it stays in the loading state) at 1400, 1100 and 800px: every diff on the axios guide now ends inside its figure; before, the first diff spilled into the playground's tabs. High.
  • The hand-off to Monaco once it loads: not run here (CDN blocked in my environment). The inline height still applies as soon as the loading node unmounts. Medium.
  • Bots and phones render the static diff directly, outside Monaco: unaffected. High.

Generated by Claude Code


Note

Low Risk
Docs-site presentation fix limited to Monaco diff loading layout; no auth, data, or API changes.

Overview
Fixes Monaco diff loading UI overlapping content below on docs pages (e.g. axios migration guide) while @monaco-editor/react shows the static Before/After fallback.

The loading prop now wraps the fallback in a diffLoading marker div. CSS sets height: auto !important on the Monaco wrapper section only while that marker is present, so the loading state sizes to the taller static diff (wrapping + title bars) instead of Monaco’s line-count estimate. When Monaco mounts, the marker unmounts and the previous measured height behavior returns.

Reviewed by Cursor Bugbot for commit d94c990. Bugbot is set up for automated code reviews on this repo. Configure here.

…elow

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
@ntucker ntucker self-assigned this Oct 27, 2026
@changeset-bot

changeset-bot Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: d94c990

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-27T02:55:35.509780Z a32752c PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@github-actions

github-actions Bot commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

Docs preview: https://docs-site-pr-4491-data-client.vercel.app

Built from d94c990 merged into master (this build). Locales: en (the merge queue builds every locale).

@codecov

codecov Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.37%. Comparing base (56e2bca) to head (d94c990).

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #4491   +/-   ##
=======================================
  Coverage   98.37%   98.37%           
=======================================
  Files         161      161           
  Lines        3080     3080           
  Branches      605      605           
=======================================
  Hits         3030     3030           
  Misses         10       10           
  Partials       40       40           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ntucker
ntucker added this pull request to the merge queue Oct 27, 2026
Merged via the queue into master with commit 25dfbcc Oct 27, 2026
33 checks passed
@ntucker
ntucker deleted the claude/project-thread-7qq44t branch October 27, 2026 03:04
github-actions Bot added a commit that referenced this pull request Oct 27, 2026
…elow (#4491)

Ports website fixes from master to `0.18.x` (the current version, which serves the root docs):

- docs: Keep DiffEditor's loading diff from spilling over the content below (#4491) (25dfbcc)

Made by website-port.yml. Auto-merge is on: it merges once the branch's required checks pass, and the merge rebuilds the root through maintenance.yml. Keep the last line in the squash message, so maintenance.yml doesn't port it back.

Maintenance-only: ported from master (25dfbcc)

This branch was successfully deployed

1 active deployment
docs-preview — d94c9908 Deployed Oct 27, 2026 by ntucker via preview / docs deploy #4256
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants