From de7d9e8b220f675828ebebc4d3efa3d3ed6a5eda Mon Sep 17 00:00:00 2001
From: medric-z <180440015+medric-z@users.noreply.github.com>
Date: Sun, 8 Nov 2026 21:35:41 +0300
Subject: [PATCH] fix(web): the citation comment box stays put while you
 dictate

The live transcript in text-field dictation grows with each transcript
chunk until it reaches its max-h-24 cap. Inside the citation comment
popover, each of those resizes re-runs Base UI collision avoidance, so
a quote in the lower part of the window sends the box above it, where
it creeps upward with every chunk. Once the cap is reached, the
transcript stays scrolled to the top, so the newest words are hidden.

The transcript box now has a fixed height for the whole recording and
is a flex-col-reverse scroller pinned to the newest words. The form
resizes once, when recording starts, and not again while you talk.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/speech/useTextFieldSpeech.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/speech/useTextFieldSpeech.tsx b/apps/web/src/speech/useTextFieldSpeech.tsx
index 575072c71d096..838573684be11 100644
--- a/apps/web/src/speech/useTextFieldSpeech.tsx
+++ b/apps/web/src/speech/useTextFieldSpeech.tsx
@@ -74,14 +74,14 @@ export function TextFieldSpeechControls({
 }) {
   return (
     <>
-      {speech.preview ? (
-        <p
-          role="status"
-          className="order-first max-h-24 w-full overflow-y-auto rounded-lg border border-border/60 bg-muted/30 px-2.5 py-1.5 text-sm break-words whitespace-pre-wrap"
-        >
-          {speech.preview.committed}
-          <span className="text-muted-foreground">{speech.preview.tentative}</span>
-        </p>
+      {speech.state.phase === "recording" || speech.state.phase === "transcribing" ? (
+        // Fixed height pinned to the newest words, so dictating never resizes the form or moves its popover.
+        <div className="order-first flex h-24 w-full flex-col-reverse overflow-y-auto rounded-lg border border-border/60 bg-muted/30 px-2.5 py-1.5 text-sm">
+          <p role="status" className="break-words whitespace-pre-wrap">
+            {speech.preview?.committed}
+            <span className="text-muted-foreground">{speech.preview?.tentative}</span>
+          </p>
+        </div>
       ) : null}
       <ComposerSpeechRecordingPill
         size="compact"