From 289f070d64c824a43a401762ec786f5502a0074e Mon Sep 17 00:00:00 2001
From: Eugene Choi <4eugenechoi@gmail.com>
Date: Thu, 2 Oct 2025 17:41:29 -0400
Subject: [PATCH] [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
---
 .../apps/playground/components/AccordionWindow.tsx     |  3 +--
 .../apps/playground/components/Editor/EditorImpl.tsx   |  6 +-----
 compiler/apps/playground/components/Editor/Output.tsx  | 10 ++++++++--
 compiler/apps/playground/styles/globals.css            |  8 ++++++++
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/compiler/apps/playground/components/AccordionWindow.tsx b/compiler/apps/playground/components/AccordionWindow.tsx
index 09614bd505..311bf2590d 100644
--- a/compiler/apps/playground/components/AccordionWindow.tsx
+++ b/compiler/apps/playground/components/AccordionWindow.tsx
@@ -7,7 +7,6 @@
 
 import {Resizable} from 're-resizable';
 import React, {
-  useCallback,
   useId,
   unstable_ViewTransition as ViewTransition,
   unstable_addTransitionType as addTransitionType,
@@ -66,7 +65,7 @@ function AccordionWindowItem({
 
   const transitionName = `accordion-window-item-${id}`;
 
-  const toggleTabs = () => {
+  const toggleTabs = (): void => {
     startTransition(() => {
       addTransitionType(EXPAND_ACCORDION_TRANSITION);
       const nextState = new Set(tabsOpen);
diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx
index e7068534cd..9f000f8556 100644
--- a/compiler/apps/playground/components/Editor/EditorImpl.tsx
+++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx
@@ -24,11 +24,7 @@ import BabelPluginReactCompiler, {
   printFunctionWithOutlined,
   type LoggerEvent,
 } from 'babel-plugin-react-compiler';
-import {
-  useDeferredValue,
-  useMemo,
-  unstable_ViewTransition as ViewTransition,
-} from 'react';
+import {useDeferredValue, useMemo} from 'react';
 import {useStore} from '../StoreContext';
 import ConfigEditor from './ConfigEditor';
 import Input from './Input';
diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx
index 17da512e80..8c22ca35fc 100644
--- a/compiler/apps/playground/components/Editor/Output.tsx
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@@ -372,12 +372,18 @@ function TextTabContent({
           loading={''}
           options={{
             ...monacoOptions,
+            scrollbar: {
+              vertical: 'hidden',
+            },
+            dimension: {
+              width: 0,
+              height: 0,
+            },
             readOnly: true,
             lineNumbers: 'off',
             glyphMargin: false,
             // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
-            lineDecorationsWidth: 0,
-            lineNumbersMinChars: 0,
+            overviewRulerLanes: 0,
           }}
         />
       ) : (
diff --git a/compiler/apps/playground/styles/globals.css b/compiler/apps/playground/styles/globals.css
index 55f03c46d2..86b069f057 100644
--- a/compiler/apps/playground/styles/globals.css
+++ b/compiler/apps/playground/styles/globals.css
@@ -124,3 +124,11 @@
 ::view-transition-group(.expand-accordion) {
   overflow: clip;
 }
+
+/**
+ * For some reason, the original Monaco editor is still visible to the
+ * left of the DiffEditor. This is a workaround for better visual clarity.
+ */
+.monaco-diff-editor .editor.original{
+  visibility: hidden !important;
+}