From 9a753e9adbf1ff509723a2516d0c6976e5e33d73 Mon Sep 17 00:00:00 2001
From: cynarAI <155274210+cynarAI@users.noreply.github.com>
Date: Thu, 22 Oct 2026 16:36:44 +0200
Subject: [PATCH] fix(web): increase transcript bottom padding when task pill
 is pinned above composer

---
 apps/web/src/pages/shell/transcript.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/pages/shell/transcript.tsx b/apps/web/src/pages/shell/transcript.tsx
index 3effbe4..6b3f644 100644
--- a/apps/web/src/pages/shell/transcript.tsx
+++ b/apps/web/src/pages/shell/transcript.tsx
@@ -68,6 +68,7 @@ import {
   ChartBlockView,
   ChoiceCard,
   ExternalLinksBar,
+  extractActivePlanState,
   McpApprovalCard,
   PlanCard,
 } from "./message-cards";
@@ -296,6 +297,10 @@ export const Transcript = memo(function Transcript({
     }
     return { absorbed, stepsByPlanMsgId };
   }, [coalescedMessages, runNarration.steps]);
+  const hasActivePlanPill = useMemo(
+    () => Boolean(extractActivePlanState(coalescedMessages, running, runStartedAt)),
+    [coalescedMessages, running, runStartedAt],
+  );
   const trailingAnsweringBots = useMemo(() => {
     const liveProgressMessages = coalescedMessages.filter(
       (message) => !runNarration.hidden.has(message.id) && message.id.startsWith("progress:"),
@@ -538,7 +543,7 @@ export const Transcript = memo(function Transcript({
 
   useLayoutEffect(() => {
     if (following.current) snapToEnd();
-  }, [messages, running, snapToEnd]);
+  }, [messages, running, hasActivePlanPill, snapToEnd]);
 
   // A question the bot waits on can scroll out of view; offer a way back to it instead of the arrow.
   const [askOffscreen, setAskOffscreen] = useState(false);
@@ -666,8 +671,8 @@ export const Transcript = memo(function Transcript({
         ) : null}
         <div
           className={`mx-auto flex w-full flex-1 flex-col ${
-            encounterMode ? "max-w-2xl gap-3 pb-28 md:pb-32" : "max-w-4xl gap-6 pb-28 md:pb-32"
-          }`}
+            encounterMode ? "max-w-2xl gap-3" : "max-w-4xl gap-6"
+          } ${hasActivePlanPill ? "pb-48 md:pb-52" : "pb-28 md:pb-32"}`}
         >
           {coalescedMessages.map((message) => {
             if (runNarration.hidden.has(message.id)) return null;
@@ -923,7 +928,9 @@ export const Transcript = memo(function Transcript({
         aria-hidden={!showJumpToLatest}
         tabIndex={showJumpToLatest ? 0 : -1}
         onClick={jumpToLatest}
-        className={`absolute bottom-24 left-1/2 z-20 grid h-9 w-9 -translate-x-1/2 place-items-center rounded-full border border-border bg-muted/95 text-foreground/75 shadow-md backdrop-blur transition-[opacity,transform,background-color] duration-200 ease-[cubic-bezier(.22,1,.36,1)] hover:bg-border md:bottom-28 motion-reduce:transition-none ${
+        className={`absolute left-1/2 z-20 grid h-9 w-9 -translate-x-1/2 place-items-center rounded-full border border-border bg-muted/95 text-foreground/75 shadow-md backdrop-blur transition-[opacity,transform,background-color] duration-200 ease-[cubic-bezier(.22,1,.36,1)] hover:bg-border motion-reduce:transition-none ${
+          hasActivePlanPill ? "bottom-44 md:bottom-48" : "bottom-24 md:bottom-28"
+        } ${
           showJumpToLatest
             ? "translate-y-0 opacity-100"
             : "pointer-events-none translate-y-2 opacity-0"
@@ -936,7 +943,9 @@ export const Transcript = memo(function Transcript({
           type="button"
           data-testid="needs-you-jump"
           onClick={jumpToAsk}
-          className="absolute bottom-24 left-1/2 z-20 inline-flex h-9 -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-muted/95 px-3.5 text-ui-body-sm font-medium text-foreground shadow-md backdrop-blur hover:bg-border md:bottom-28"
+          className={`absolute left-1/2 z-20 inline-flex h-9 -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-muted/95 px-3.5 text-ui-body-sm font-medium text-foreground shadow-md backdrop-blur hover:bg-border ${
+            hasActivePlanPill ? "bottom-44 md:bottom-48" : "bottom-24 md:bottom-28"
+          }`}
         >
           <span aria-hidden="true" className="size-2 rounded-full bg-warning" />
           {t`Needs you`}