From 36cb39142a9e1b50c2aa63ff43ac7287d7de18d0 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 5 Oct 2026 02:12:11 +0000 Subject: [PATCH 1/3] fix(website): Set the dark editor bar apart from the preview headers After the chrome restyle, dark mode gave the editor tabs and the Live Preview header the same grey, so the two sides ran together. The editor column's bars now sit a step above the code, darker than the neutral preview headers, so the split reads from tone alone with no divider. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_01KR7TVj44kxYCnGtVXVkx3f --- website/src/components/Playground/styles.module.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css index 612b450ee2de..f5d6c9b422b3 100644 --- a/website/src/components/Playground/styles.module.css +++ b/website/src/components/Playground/styles.module.css @@ -96,6 +96,12 @@ --pg-tab-selected: #e3e8f2; --pg-tab-selected-bg: var(--monoco-code-background); } +/* Dark mode: the editor column sits a step above the code, darker than the + neutral preview headers, so the two sides read apart without a divider */ +:root[data-theme='dark'] :not(.endpointPlayground) > .playgroundTextEdit { + --pg-bar: hsl(229, 14%, 21%); + --pg-tab-hover-bg: hsl(229, 14%, 26%); +} /* EndpointPlayground's right column is code, so it always uses the dark bar */ .endpointPlayground { --pg-bar: hsl(229, 8%, 26%); From dbd28f4257a9a1f347856ce741ba32b0f210161a Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 5 Oct 2026 02:28:08 +0000 Subject: [PATCH 2/3] fix(website): Trim DiffEditor left indent and even out its top padding Side-by-side Monaco forces a glyph margin on the original pane, which pushed both panes' code about 30px in. Turn it off after mount so code starts 13px from the edge, and give the diff 10px above the first line to match the 10px below the last. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_01KR7TVj44kxYCnGtVXVkx3f --- website/src/components/DiffEditorMonaco.tsx | 3 +++ website/src/components/Playground/styles.module.css | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/website/src/components/DiffEditorMonaco.tsx b/website/src/components/DiffEditorMonaco.tsx index 30502db1d6ae..2bbda466f390 100644 --- a/website/src/components/DiffEditorMonaco.tsx +++ b/website/src/components/DiffEditorMonaco.tsx @@ -34,6 +34,9 @@ export default function DiffEditor({ documents, fallback }: DiffMonacoProps) { (editor: MonacoDiffEditor) => { handleMount(editor); const panes = [editor.getOriginalEditor(), editor.getModifiedEditor()]; + // Side-by-side forces a glyph margin on the original pane; nothing + // renders there in this read-only diff, so it only indents the code + panes[0].updateOptions({ glyphMargin: false }); const updateOffsets = () => { const left = editor.getContainerDomNode().getBoundingClientRect().left; const next = panes.map( diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css index f5d6c9b422b3..214617b93ec8 100644 --- a/website/src/components/Playground/styles.module.css +++ b/website/src/components/Playground/styles.module.css @@ -549,6 +549,10 @@ div.fixtureJson { letter-spacing: 0.06em; text-transform: uppercase; } +/* Match the space below the last line */ +.standaloneEditor .diffLabels + .playgroundEditor { + padding-top: 10px; +} .diffLabels > span { position: absolute; left: 0.75rem; From d0b1472a82abb588eee330f0df60a6e3acd3088c Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 5 Oct 2026 02:30:43 +0000 Subject: [PATCH 3/3] refactor(website): Make the dark editor and diff padding selectors order-proof The dark editor override now matches any .playgroundTextEdit under a non-endpoint container, so a wrapper element can't leak it into the endpoint playground. The diff top padding outranks the standalone rule instead of relying on file order. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_01KR7TVj44kxYCnGtVXVkx3f --- website/src/components/Playground/styles.module.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css index 214617b93ec8..7c3e8cf842bd 100644 --- a/website/src/components/Playground/styles.module.css +++ b/website/src/components/Playground/styles.module.css @@ -98,7 +98,9 @@ } /* Dark mode: the editor column sits a step above the code, darker than the neutral preview headers, so the two sides read apart without a divider */ -:root[data-theme='dark'] :not(.endpointPlayground) > .playgroundTextEdit { +:root[data-theme='dark'] + .playgroundContainer:not(.endpointPlayground) + .playgroundTextEdit { --pg-bar: hsl(229, 14%, 21%); --pg-tab-hover-bg: hsl(229, 14%, 26%); } @@ -550,7 +552,7 @@ div.fixtureJson { text-transform: uppercase; } /* Match the space below the last line */ -.standaloneEditor .diffLabels + .playgroundEditor { +.playgroundContainer.standaloneEditor .diffLabels + .playgroundEditor { padding-top: 10px; } .diffLabels > span {