Issue: Monaco Editor in NodeDialog prevents dialog from shrinking when resized

[roushanatlcci]

Monaco Editor in NodeDialog prevents dialog from shrinking when resized

Description

The NodeDialog component has been made resizable by dragging the lower-right corner handle. However, when the dialog contains a Monaco editor (via CodeEditorRenderer), the dialog can expand but cannot shrink back to a smaller size. This creates a horizontal scrollbar and poor user experience.

Steps to Reproduce

1. Open a node dialog that contains a code editor field (uses CodeEditorRenderer)
2. Drag the resize handle in the lower-right corner to expand the dialog
3. Try to drag the resize handle to shrink the dialog to a smaller width
4. Observe that the dialog width state changes, but the content does not shrink

Expected Behavior

• The dialog should resize smoothly in both directions (expand and shrink)
• Monaco editor should adjust its layout to fit the new dialog dimensions
• No horizontal scrollbar should appear when shrinking the dialog
• All form controls should respect the dialog width constraints

Actual Behavior

• Dialog expands correctly when dragged larger
• When dragged smaller, the dialog frame resizes but content maintains its expanded width
• Horizontal scrollbar appears in the DialogContent
• Monaco editor does not shrink to fit the new width
• Other JsonForms controls without Monaco editor work correctly

Technical Details

Affected Files:

• continuum-frontend/workflow-editor-extension/src/browser/components/node-dialog/NodeDialog.tsx:148-193 - Main dialog component with resize logic
• continuum-frontend/workflow-editor-extension/src/browser/components/monaco/MonacoEditorWrapper.tsx:78-114 - Monaco editor resize handling
• continuum-frontend/workflow-editor-extension/src/browser/components/node-dialog/CodeEditorRenderer.tsx:63-104 - Custom JsonForms renderer for code editor

What's Been Tried:

1. ✅ Added ResizeObserver to MonacoEditorWrapper to call editor.layout() on resize
2. ✅ Set explicit width/maxWidth constraints on DialogContent matching dialog size
3. ✅ Added minWidth: 0 throughout the component hierarchy to allow flex shrinking
4. ✅ Disabled automaticLayout and manually control Monaco layout with explicit dimensions
5. ✅ Added aggressive CSS rules with !important to override default styles
6. ✅ Set Monaco options: scrollBeyondLastColumn: 0, wordWrap: 'on', fixedOverflowWidgets: true

Current State:

• Forms without Monaco editor shrink correctly
• Monaco editor specifically prevents shrinking
• The ResizeObserver fires and calls layout(), but Monaco doesn't respect the smaller dimensions

Possible Solutions to Investigate

1. Check if Monaco has internal minimum width constraints that need to be overridden
2. Investigate if Monaco's DOM structure is adding fixed-width elements
3. Try wrapping Monaco in an additional container with contain: layout size
4. Consider if Monaco needs to be destroyed and recreated on significant size changes
5. Check if there are Monaco-specific viewport or overflow settings affecting layout
6. Investigate JsonForms rendering lifecycle - may need to force re-render on dialog resize

Environment

• Monaco Editor integrated with Theia
• JsonForms with Material UI renderers
• Custom code editor renderer for Monaco integration

Priority

Medium - Feature works for expansion, shrinking is a UX improvement