fix: Monarch editor: autocomplete cropped

[cursor]

Summary

Fixes #1804 — The autocomplete/suggestions dropdown in Monaco editor input fields was being cropped/clipped when used inside the component configuration sidebar.

Root Cause

The component sidebar (componentSidebar/index.tsx) uses overflow-hidden on its container, which clips any child elements that extend beyond its boundaries. Monaco's suggest widget (autocomplete dropdown) is rendered inside the editor's DOM tree by default, so it gets cut off by the sidebar's overflow clipping.

Fix

Added fixedOverflowWidgets: true to the Monaco editor options in all three configuration field renderers:

• TextFieldRenderer (plaintext editor)
• ObjectFieldRenderer (JSON editor)
• XMLFieldRenderer (XML editor)

This is Monaco's built-in solution for this exact problem — it renders overlay widgets (like the autocomplete dropdown, parameter hints, etc.) in a fixed-position container that escapes overflow: hidden ancestors.

Changes

File	Change
web_src/src/ui/configurationFieldRenderer/TextFieldRenderer.tsx	Added fixedOverflowWidgets: true to editor options
web_src/src/ui/configurationFieldRenderer/ObjectFieldRenderer.tsx	Added fixedOverflowWidgets: true to editor options
web_src/src/ui/configurationFieldRenderer/XMLFieldRenderer.tsx	Added fixedOverflowWidgets: true to editor options

Verification

• TypeScript compiles without errors (tsc --noEmit passes)
• Vite production build succeeds (npm run build passes)
• Prettier formatting verified (make format.js passes)

  

[superplanehq-integration]

👋 Commands for maintainers:

• /sp start - Start an ephemeral machine (takes ~30s)
• /sp stop - Stop a running machine (auto-executed on pr close)