From 490dba54e989cf7e52f308a738f1fd6ed1418d4b Mon Sep 17 00:00:00 2001
From: collissimo <148455189+collissimo@users.noreply.github.com>
Date: Sat, 31 Oct 2026 10:21:48 +0100
Subject: [PATCH] fix(web): dictation preview stays on screen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ChatComposer.tsx            | 2 +-
 apps/web/src/components/chat/ComposerDictationButton.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 42d8cccbc4520..e29c0128bac46 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -3464,7 +3464,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
               <div
                 data-chat-composer-footer="true"
                 className={cn(
-                  "flex min-w-0 flex-nowrap items-center overflow-visible px-2 pb-2",
+                  "relative flex min-w-0 flex-nowrap items-center overflow-visible px-2 pb-2",
                   pendingUserInputs.length > 0 && "pt-2",
                   showMobilePendingAnswerActions && "hidden sm:flex",
                 )}
diff --git a/apps/web/src/components/chat/ComposerDictationButton.tsx b/apps/web/src/components/chat/ComposerDictationButton.tsx
index 463f3519f764b..c2b86386ac36a 100644
--- a/apps/web/src/components/chat/ComposerDictationButton.tsx
+++ b/apps/web/src/components/chat/ComposerDictationButton.tsx
@@ -66,12 +66,13 @@ export function ComposerDictationButton(props: {
         .join(" · ");
 
   return (
-    <div className="relative flex items-center">
+    <div className="flex items-center">
       {status !== null || notice !== null ? (
+        // Positioned against the composer footer, so it stays inside the composer at any width.
         <div
           role="status"
           aria-live="polite"
-          className="pointer-events-none absolute right-0 bottom-full z-20 mb-3 w-max max-w-[min(32rem,80vw)] rounded-lg border border-border bg-popover px-3 py-2 text-sm shadow-md"
+          className="pointer-events-none absolute start-2 bottom-full z-20 mb-3 w-max max-w-[min(32rem,calc(100%-1rem))] rounded-lg border border-border bg-popover px-3 py-2 text-sm shadow-md"
         >
           {status !== null ? (
             <>