Correct styling for CodeEditor

- Certain styling was not needed for Monaco Code Editor, so those were
  removed
- The div on the right column for the code editor was locking once expanded, so it could not shrink. In the dev tools, the div was saying "This item was clamped to its minimum size". Updated the styling on that div to allow for shrinking/growing.

src/app/editor/components/CodeEditor.tsx

@@ -1,6 +1,6 @@
 'use client'
 import Editor from '@monaco-editor/react'
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, useRef } from 'react'
 import { parse } from 'yaml'
 import { stringify } from 'yaml'
 
@@ -132,18 +132,13 @@ export default function CodeEditor() {
  options={{
  wordWrap: 'on',
  showFoldingControls: 'always',
+ wrappingIndent: 'same',
+ minimap: {
+ enabled: true,
+ },
+ automaticLayout: true,
  }}
- defaulValue={
- 'Please enter treatment configuration. Do not refresh the page before saving.'
- }
  onChange={(newValue) => handleChange(newValue)}
- padding={5}
- style={{
- fontSize: 12,
- fontFamily:
- 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
- backgroundColor: '#F0F2F6',
- }}
  />
  </div>
  <div style={{ backgroundColor: '#F0F2F6' }}>

src/app/editor/page.tsx

@@ -57,7 +57,7 @@ export default function EditorPage({}) {
 
  <DraggableSplitter dir="vertical" {...codeSeparatorProps} />
 
- <div id="rightColumn" className="grow">
+ <div id="rightColumn" className="flex-1 min-w-[200px] overflow-auto">
  <CodeEditor />
  </div>
  </div>