[playground] Config panel quality fixes (facebook#34611)

Fixed two small issues with the config panel in the compiler playground:
1. Object descriptions were being confined in the config box and most of
it would not be visible upon hover
2. Changed it so that "Applied Configs" would only display a valid set
of configs, rather than switching between "Invalid Configs" and the set
of options. This would be less visually jarring for users as the Output
panel already displays errors. Additionally, if users want to see the
list of config options but have a currently broken config, they would
previously not know how to fix it.

Object hover before: 
<img width="702" height="481" alt="Screenshot 2025-09-26 at 10 41 03 AM"
src="https://github.com/user-attachments/assets/b2ddec2f-16ba-41a1-be1f-96211f46764c"
/>
Hover after:
<img width="702" height="481" alt="Screenshot 2025-09-26 at 10 40 37 AM"
src="https://github.com/user-attachments/assets/dc713a22-4710-46a8-a5d7-485060cc9074"
/>

Applied Configs always displays the last valid set of configs:


https://github.com/user-attachments/assets/2fb9232f-7388-4488-9b7a-bb48bf09e4ca

Author: EugeneChoi4

compiler/apps/playground/components/Editor/ConfigEditor.tsx

@@ -6,7 +6,6 @@
  */
 
 import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
-import {PluginOptions} from 'babel-plugin-react-compiler';
 import type {editor} from 'monaco-editor';
 import * as monaco from 'monaco-editor';
 import React, {
@@ -18,9 +17,8 @@ import React, {
 } from 'react';
 import {Resizable} from 're-resizable';
 import {useStore, useStoreDispatch} from '../StoreContext';
-import {monacoOptions} from './monacoOptions';
+import {monacoConfigOptions} from './monacoOptions';
 import {IconChevron} from '../Icons/IconChevron';
-import prettyFormat from 'pretty-format';
 import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
 
 // @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
@@ -29,9 +27,9 @@ import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
 loader.config({monaco});
 
 export default function ConfigEditor({
-  appliedOptions,
+  formattedAppliedConfig,
 }: {
-  appliedOptions: PluginOptions | null;
+  formattedAppliedConfig: string;
 }): React.ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -49,7 +47,7 @@ export default function ConfigEditor({
               setIsExpanded(false);
             });
           }}
-          appliedOptions={appliedOptions}
+          formattedAppliedConfig={formattedAppliedConfig}
         />
       </div>
       <div
@@ -71,10 +69,10 @@ export default function ConfigEditor({
 
 function ExpandedEditor({
   onToggle,
-  appliedOptions,
+  formattedAppliedConfig,
 }: {
-  onToggle: () => void;
-  appliedOptions: PluginOptions | null;
+  onToggle: (expanded: boolean) => void;
+  formattedAppliedConfig: string;
 }): React.ReactElement {
   const store = useStore();
   const dispatchStore = useStoreDispatch();
@@ -122,13 +120,6 @@ function ExpandedEditor({
     });
   };
 
-  const formattedAppliedOptions = appliedOptions
-    ? prettyFormat(appliedOptions, {
-        printFunctionName: false,
-        printBasicPrototype: false,
-      })
-    : 'Invalid configs';
-
   return (
     <ViewTransition
       update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}>
@@ -158,7 +149,7 @@ function ExpandedEditor({
                 Config Overrides
               </h2>
             </div>
-            <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
+            <div className="flex-1 border border-gray-300">
               <MonacoEditor
                 path={'config.ts'}
                 language={'typescript'}
@@ -167,16 +158,7 @@ function ExpandedEditor({
                 onChange={handleChange}
                 loading={''}
                 className="monaco-editor-config"
-                options={{
-                  ...monacoOptions,
-                  lineNumbers: 'off',
-                  renderLineHighlight: 'none',
-                  overviewRulerBorder: false,
-                  overviewRulerLanes: 0,
-                  fontSize: 12,
-                  scrollBeyondLastLine: false,
-                  glyphMargin: false,
-                }}
+                options={monacoConfigOptions}
               />
             </div>
           </div>
@@ -186,23 +168,16 @@ function ExpandedEditor({
                 Applied Configs
               </h2>
             </div>
-            <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
+            <div className="flex-1 border border-gray-300">
               <MonacoEditor
                 path={'applied-config.js'}
                 language={'javascript'}
-                value={formattedAppliedOptions}
+                value={formattedAppliedConfig}
                 loading={''}
                 className="monaco-editor-applied-config"
                 options={{
-                  ...monacoOptions,
-                  lineNumbers: 'off',
-                  renderLineHighlight: 'none',
-                  overviewRulerBorder: false,
-                  overviewRulerLanes: 0,
-                  fontSize: 12,
-                  scrollBeyondLastLine: false,
+                  ...monacoConfigOptions,
                   readOnly: true,
-                  glyphMargin: false,
                 }}
               />
             </div>