Fix Monaco Resizing Issue in Editor Block

[sawka]

No description provided.

[coderabbitai]

Walkthrough

Resize handling for Monaco editors was centralized: MonacoCodeEditor and MonacoDiffViewer in frontend/app/monaco/monaco-react.tsx now attach a debounced ResizeObserver to their container elements to trigger editor layout on size changes. The duplicate resize-observer/debounce logic previously present in frontend/app/view/waveconfig/waveconfig.tsx was removed, and the container ref usage and related effect were deleted. No public/exported API signatures were changed.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	No description was provided by the author, making it impossible to assess whether the description relates to the changeset.	Add a pull request description explaining the resizing issue being fixed and how the refactored ResizeObserver implementation resolves it.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix Monaco Resizing Issue in Editor Block' directly describes the main change: it fixes a resizing issue with Monaco editors by refactoring ResizeObserver-based layout handling between two components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch sawka/fix-monaco-resize

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

frontend/app/monaco/monaco-react.tsx (1)

76-91: Consider extracting a shared useResizeLayout hook to DRY up the two identical effects.

Both MonacoCodeEditor and MonacoDiffViewer use the exact same ResizeObserver + debounce pattern. A small custom hook would remove the duplication:

Example extraction

function useResizeLayout(
    divRef: React.RefObject<HTMLElement | null>,
    editorRef: React.RefObject<{ layout(): void } | null>
) {
    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();
        };
    }, []);
}

Also applies to: 166-181

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@frontend/app/monaco/monaco-react.tsx`:
- Around line 163-175: The ResizeObserver effect creates a debounced callback
(debouncedLayout) but never cancels it on cleanup, causing pending timers to run
after unmount; update the useEffect cleanup to call debouncedLayout.cancel() (or
the cancel method your debounce implementation provides) before disconnecting
the ResizeObserver so the debounced callback created in the block that
references diffRef.current and divRef.current is properly cleared on unmount.
- Around line 76-88: The debounced callback created by debounce is not cancelled
on effect cleanup, so add cancellation before disconnecting the ResizeObserver:
call debouncedLayout.cancel() (or the cancel function returned by debounce) in
the cleanup prior to resizeObserver.disconnect() in the effect that uses
editorRef/divRef and do the same in the MonacoDiffViewer effect; if the debounce
utility doesn't expose a cancel method, update debounce to return a wrapper
function with a .cancel() method (or separate cancel function) so both effects
can call it to prevent layout() being invoked after the editor is disposed.

🧹 Nitpick comments (1)

frontend/app/view/waveconfig/waveconfig.tsx (1)

99-99: editorContainerRef appears unused after removing the ResizeObserver logic.

With the resize observer moved into monaco-react.tsx, this ref is only attached to the div (Line 159) but never read. Consider removing it to avoid confusion.

🧹 Proposed cleanup

-    const editorContainerRef = useRef<HTMLDivElement>(null);

And on Line 159:

-            <div ref={editorContainerRef} className="flex flex-col flex-1 min-w-0">
+            <div className="flex flex-col flex-1 min-w-0">