fix(chat): measure the observer's first delivery like any other

The width can change between the mount-time measure and observe(), so
treating the first notification as confirmation of the mount width dropped
that change and left the stale height in place.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.test.tsx

@@ -33,9 +33,12 @@ let editorWidth = 700
 let autosizeCalls = 0
 
 /**
- * Mirrors the real observer's contract closely enough to test the width guard:
- * `observe` delivers an initial notification for the current size (browsers do),
- * and {@link resizeTo} delivers subsequent ones.
+ * Mirrors the real observer's contract closely enough to test the width guard.
+ * `observe` only registers the target — real deliveries, including the initial
+ * one browsers send, are asynchronous, so every test drives them explicitly via
+ * {@link resizeTo} / {@link FakeResizeObserver.deliverAll}. Delivering inside
+ * `observe` would hide the window between the mount-time measure and the first
+ * notification, which is exactly where a width change can be missed.
  */
 class FakeResizeObserver implements ResizeObserver {
   private static instances: FakeResizeObserver[] = []
@@ -49,7 +52,6 @@ class FakeResizeObserver implements ResizeObserver {
 
   observe(target: Element) {
     this.targets.push(target)
-    this.deliver()
   }
 
   unobserve(target: Element) {
@@ -114,6 +116,14 @@ function resizeTo(width: number, wrappedHeight: number) {
   act(() => FakeResizeObserver.deliverAll())
 }
 
+/**
+ * Delivers the observer's initial notification at the mounted width, putting the
+ * editor in the steady state a test can then resize away from.
+ */
+function settle() {
+  act(() => FakeResizeObserver.deliverAll())
+}
+
 describe('PromptEditor autosize', () => {
   let originalScrollHeight: PropertyDescriptor | undefined
 
@@ -157,6 +167,7 @@ describe('PromptEditor autosize', () => {
    */
   it('re-measures when the editor width changes so no text falls outside the textarea', () => {
     const { textarea, unmount } = mountEditor()
+    settle()
     expect(textarea.style.height).toBe('240px')
 
     resizeTo(340, 500)
@@ -167,6 +178,7 @@ describe('PromptEditor autosize', () => {
 
   it('re-measures again when the editor widens back', () => {
     const { textarea, unmount } = mountEditor()
+    settle()
 
     resizeTo(340, 500)
     resizeTo(700, 240)
@@ -175,28 +187,37 @@ describe('PromptEditor autosize', () => {
     unmount()
   })
 
+  /**
+   * `observe` registers the target, but the first notification arrives a frame
+   * later. A sidebar or side-panel transition can change the width inside that
+   * window, so the first delivery must be measured like any other rather than
+   * trusted to confirm the width the mount-time measure used.
+   */
+  it('re-measures on the first delivery when the width changed before it arrived', () => {
+    const { textarea, unmount } = mountEditor()
+    expect(textarea.style.height).toBe('240px')
+
+    resizeTo(340, 500)
+
+    expect(textarea.style.height).toBe('500px')
+    unmount()
+  })
+
   /**
    * `autosize` writes the textarea's height, which grows the scroller and
    * re-notifies this observer. Re-measuring on an unchanged width would make
    * that a feedback loop.
    */
   it('ignores resize notifications that do not change the width', () => {
     const { textarea, unmount } = mountEditor()
-    const callsAfterMount = autosizeCalls
+    settle()
+    const callsAfterSettle = autosizeCalls
 
     contentHeight = 500
     act(() => FakeResizeObserver.deliverAll())
 
     expect(textarea.style.height).toBe('240px')
-    expect(autosizeCalls).toBe(callsAfterMount)
-    unmount()
-  })
-
-  /** The observer's initial delivery reports the width the mount measure used. */
-  it('does not re-measure on the observer’s first delivery', () => {
-    const { unmount } = mountEditor()
-
-    expect(autosizeCalls).toBe(1)
+    expect(autosizeCalls).toBe(callsAfterSettle)
     unmount()
   })
 

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/prompt-editor.tsx

@@ -112,18 +112,19 @@ export function PromptEditor({
    *
    * Only width is compared: `autosize` writes the textarea's height, which grows
    * the scroller until its cap and re-notifies this observer, so reacting to
-   * height would feed itself. The first delivery reports the width the
-   * mount-time measure already used, so it is recorded without re-measuring.
+   * height would feed itself. The first delivery is measured like any other —
+   * the width can change between the mount-time measure and `observe()`, and
+   * re-measuring an unchanged width only writes the same height back.
    */
   useEffect(() => {
     const scroller = scrollerRef.current
     if (!scroller) return
     let lastWidth: number | null = null
     const observer = new ResizeObserver(([entry]) => {
       const width = entry.contentRect.width
-      const previousWidth = lastWidth
+      if (width === lastWidth) return
       lastWidth = width
-      if (previousWidth !== null && previousWidth !== width) autosize()
+      autosize()
     })
     observer.observe(scroller)
     return () => observer.disconnect()