Fix Monaco Resizing Issue in Editor Block

frontend/app/monaco/monaco-react.tsx

@@ -5,6 +5,7 @@ import { loadMonaco } from "@/app/monaco/monaco-env";
 import type * as MonacoTypes from "monaco-editor";
 import * as monaco from "monaco-editor";
 import { useEffect, useRef } from "react";
+import { debounce } from "throttle-debounce";
 
 function createModel(value: string, path: string, language?: string) {
     const uri = monaco.Uri.parse(`wave://editor/${encodeURIComponent(path)}`);
@@ -72,6 +73,23 @@ export function MonacoCodeEditor({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    useEffect(() => {
+        const editor = editorRef.current;
+        const el = divRef.current;
+        if (!editor || !el) return;
+
+        const debouncedLayout = debounce(100, () => {
+            editor.layout();
+        });
+        const resizeObserver = new ResizeObserver(debouncedLayout);
+        resizeObserver.observe(el);
+
+        return () => {
+            resizeObserver.disconnect();
+            debouncedLayout.cancel();
+        };
+    }, []);
+
     // Keep model value in sync with props
     useEffect(() => {
         const editor = editorRef.current;
@@ -145,6 +163,23 @@ export function MonacoDiffViewer({ original, modified, language, path, options }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    useEffect(() => {
+        const diff = diffRef.current;
+        const el = divRef.current;
+        if (!diff || !el) return;
+
+        const debouncedLayout = debounce(100, () => {
+            diff.layout();
+        });
+        const resizeObserver = new ResizeObserver(debouncedLayout);
+        resizeObserver.observe(el);
+
+        return () => {
+            resizeObserver.disconnect();
+            debouncedLayout.cancel();
+        };
+    }, []);
+
     // Update models on prop change
     useEffect(() => {
         const diff = diffRef.current;

frontend/app/view/waveconfig/waveconfig.tsx

@@ -10,8 +10,7 @@ import { adaptFromReactOrNativeKeyEvent, checkKeyPressed, keydownWrapper } from
 import { cn } from "@/util/util";
 import { useAtom, useAtomValue } from "jotai";
 import type * as MonacoTypes from "monaco-editor";
-import { memo, useCallback, useEffect, useRef } from "react";
-import { debounce } from "throttle-debounce";
+import { memo, useCallback, useEffect } from "react";
 
 interface ConfigSidebarProps {
     model: WaveConfigViewModel;
@@ -97,7 +96,6 @@ const WaveConfigView = memo(({ blockId, model }: ViewComponentProps<WaveConfigVi
     const [isMenuOpen, setIsMenuOpen] = useAtom(model.isMenuOpenAtom);
     const hasChanges = useAtomValue(model.hasEditedAtom);
     const [activeTab, setActiveTab] = useAtom(model.activeTabAtom);
-    const editorContainerRef = useRef<HTMLDivElement>(null);
 
     const handleContentChange = useCallback(
         (newContent: string) => {
@@ -147,20 +145,6 @@ const WaveConfigView = memo(({ blockId, model }: ViewComponentProps<WaveConfigVi
         return () => window.removeEventListener("keydown", handleKeyDown);
     }, [hasChanges, isSaving, model]);
 
-    useEffect(() => {
-        if (!editorContainerRef.current) {
-            return;
-        }
-        const debouncedLayout = debounce(100, () => {
-            if (model.editorRef.current) {
-                model.editorRef.current.layout();
-            }
-        });
-        const resizeObserver = new ResizeObserver(debouncedLayout);
-        resizeObserver.observe(editorContainerRef.current);
-        return () => resizeObserver.disconnect();
-    }, [model]);
-
     const saveTooltip = `Save (${model.saveShortcut})`;
 
     return (
@@ -171,7 +155,7 @@ const WaveConfigView = memo(({ blockId, model }: ViewComponentProps<WaveConfigVi
             <div className={`h-full ${isMenuOpen ? "" : "@max-w600:hidden"}`}>
                 <ConfigSidebar model={model} />
             </div>
-            <div ref={editorContainerRef} className="flex flex-col flex-1 min-w-0">
+            <div className="flex flex-col flex-1 min-w-0">
                 {selectedFile && (
                     <>
                         <div className="flex flex-row items-center justify-between px-4 py-2 border-b border-border">
@@ -279,7 +263,8 @@ const WaveConfigView = memo(({ blockId, model }: ViewComponentProps<WaveConfigVi
                                 <div className="flex items-center justify-center h-full text-muted-foreground">
                                     Loading...
                                 </div>
-                            ) : selectedFile.visualComponent && (!selectedFile.hasJsonView || activeTab === "visual") ? (
+                            ) : selectedFile.visualComponent &&
+                              (!selectedFile.hasJsonView || activeTab === "visual") ? (
                                 (() => {
                                     const VisualComponent = selectedFile.visualComponent;
                                     return <VisualComponent model={model} />;