[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

Author: EugeneChoi4

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);

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';

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,
           }}
         />
       ) : (

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;
+}