[playground] Improve DiffEditor scrollbar + view (#34691)
The previous DiffEditor view of the playground looked broken and not cohesive. There would be parts of the scrollbar appearing on the left side for some reason, along with two scrollbars on the right side. This PR makes the DiffEditor look more cohesive. Previous: https://github.com/user-attachments/assets/1aa1c775-5940-43b2-a75a-9b46452fb78b After: https://github.com/user-attachments/assets/b5c04998-6a6c-4b52-b3c5-b2fef21729e0
Eugene Choi committed
Oct 2, 2025 at 17:41 UTC
289f070d64c824a43a401762ec786f5502a0074e
4 files changed
+18
-9
compiler/apps/playground/components/AccordionWindow.tsx
+1
-2
@@ -7,7 +7,6 @@
7
8
import {Resizable} from 're-resizable';
9
import React, {
10
- useCallback,
10
useId,
11
unstable_ViewTransition as ViewTransition,
12
unstable_addTransitionType as addTransitionType,
@@ -66,7 +65,7 @@ function AccordionWindowItem({
65
66
const transitionName = `accordion-window-item-${id}`;
67
69
- const toggleTabs = () => {
68
+ const toggleTabs = (): void => {
69
startTransition(() => {
70
addTransitionType(EXPAND_ACCORDION_TRANSITION);
71
const nextState = new Set(tabsOpen);
compiler/apps/playground/components/Editor/EditorImpl.tsx
+1
-5
@@ -24,11 +24,7 @@ import BabelPluginReactCompiler, {
24
printFunctionWithOutlined,
25
type LoggerEvent,
26
} from 'babel-plugin-react-compiler';
27
-import {
28
- useDeferredValue,
29
- useMemo,
30
- unstable_ViewTransition as ViewTransition,
31
-} from 'react';
27
+import {useDeferredValue, useMemo} from 'react';
28
import {useStore} from '../StoreContext';
29
import ConfigEditor from './ConfigEditor';
30
import Input from './Input';
compiler/apps/playground/components/Editor/Output.tsx
+8
-2
@@ -372,12 +372,18 @@ function TextTabContent({
372
loading={''}
373
options={{
374
...monacoOptions,
375
+ scrollbar: {
376
+ vertical: 'hidden',
377
+ },
378
+ dimension: {
379
+ width: 0,
380
+ height: 0,
381
+ },
382
readOnly: true,
383
lineNumbers: 'off',
384
glyphMargin: false,
385
// Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
379
- lineDecorationsWidth: 0,
380
- lineNumbersMinChars: 0,
386
+ overviewRulerLanes: 0,
387
}}
388
/>
389
) : (
compiler/apps/playground/styles/globals.css
+8
@@ -124,3 +124,11 @@
124
::view-transition-group(.expand-accordion) {
125
overflow: clip;
126
}
127
+
128
+/**
129
+ * For some reason, the original Monaco editor is still visible to the
130
+ * left of the DiffEditor. This is a workaround for better visual clarity.
131
+ */
132
+.monaco-diff-editor .editor.original{
133
+ visibility: hidden !important;
134
+}