Repository navigation
docs: Keep DiffEditor's loading diff from spilling over the content below - #4491
Conversation
…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
|
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
Docs preview: https://docs-site-pr-4491-data-client.vercel.app Built from d94c990 merged into |
Codecov Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y5C5ZEUUH2iiB6z6TPiTPc
…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)
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
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/reactshows the static Before/After fallback.The
loadingprop now wraps the fallback in adiffLoadingmarker div. CSS setsheight: auto !importanton the Monaco wrappersectiononly 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.