fix(messages-input): fix cursor alignment and auto-resize with overlay

[waleedlatif1]

Summary

• Fixed cursor misalignment between textarea and overlay in MessagesInput
• Added proper auto-resize (min 80px, max 320px) with manual resize override
• Fixed scroll sync between textarea and overlay
• Added zero-width space handling for trailing newlines
• Matched CSS classes between textarea and overlay for pixel-perfect alignment

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 21, 2026 11:15pm

[greptile-apps]

Greptile Summary

This PR fixes cursor alignment and auto-resize issues in the MessagesInput component by synchronizing the textarea and overlay elements.

• Added syncOverlay function to synchronize width and scroll positions between textarea and overlay
• Replaced useEffect with useLayoutEffect for auto-resize to ensure DOM updates happen before paint
• Added ResizeObserver to dynamically update overlay width when textarea width changes
• Matched CSS classes between textarea and overlay for pixel-perfect text alignment (font-sans, leading-[1.5], py-[8px])
• Added zero-width space (\u200B) handling for trailing newlines to maintain cursor position accuracy
• Added proper z-index layering for textarea, overlay, and resize handle
• Reset user resize flag when content is cleared to allow auto-resize to resume

Confidence Score: 5/5

• This PR is safe to merge with minimal risk - it contains focused bug fixes with proper cleanup patterns.
• The changes are well-contained to a single component, addressing specific visual bugs. The code follows established patterns in the codebase, properly cleans up ResizeObservers, and uses appropriate React hooks for the task.
• No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx	Fixed cursor/overlay alignment by synchronizing CSS classes, added ResizeObserver for width sync, improved scroll sync during resize, and added zero-width space handling for trailing newlines.

Sequence Diagram

sequenceDiagram
    participant User
    participant Textarea
    participant syncOverlay
    participant autoResizeTextarea
    participant useLayoutEffect
    participant ResizeObserver
    participant Overlay

    User->>Textarea: Types content
    Textarea->>Textarea: fieldHandlers.onChange
    Textarea->>Textarea: updateMessageContent
    Note over Textarea: localMessages state updates
    Textarea->>useLayoutEffect: currentMessages changes
    useLayoutEffect->>autoResizeTextarea: Called for each message
    autoResizeTextarea->>Textarea: Set height (auto → calculated)
    autoResizeTextarea->>Overlay: Set height to match
    autoResizeTextarea->>syncOverlay: Sync width and scroll
    syncOverlay->>Overlay: Update width, scrollTop, scrollLeft

    User->>Textarea: Scrolls
    Textarea->>Overlay: onScroll syncs scrollTop/scrollLeft

    User->>Textarea: Resizes via handle
    Textarea->>Textarea: handleResizeStart
    Note over Textarea: Sets userResizedRef[fieldId] = true
    Textarea->>Overlay: Sync height during resize
    
    ResizeObserver->>Textarea: Width changed
    ResizeObserver->>Overlay: Update overlay width

Loading

[waleedlatif1]

@greptile

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}