From 660cddd3bc9801e089afcabba11c62f41aeac5c3 Mon Sep 17 00:00:00 2001
From: Bilal Bakr <62337003+Bil0000@users.noreply.github.com>
Date: Sat, 29 Aug 2026 19:25:20 +0300
Subject: [PATCH] fix(web): four composer spacing defects (#8090)

---
 .../web/src/components/ChatView.logic.test.ts | 19 +++++++
 apps/web/src/components/ChatView.logic.ts     | 11 ++++
 apps/web/src/components/ChatView.tsx          | 56 +++++++++++--------
 .../components/chat/ComposerStashBadge.tsx    |  2 +-
 .../chat/ComposerTasksBadge.test.tsx          | 39 +++++++++++--
 .../components/chat/ComposerTasksBadge.tsx    |  8 ++-
 6 files changed, 105 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/components/ChatView.logic.test.ts b/apps/web/src/components/ChatView.logic.test.ts
index 6586c62d2f130cf698356534a6d62bc20d3324d1..5ff86bb2381b3a1880973148ed73d28725cfa3f0 100644
--- a/apps/web/src/components/ChatView.logic.test.ts
+++ b/apps/web/src/components/ChatView.logic.test.ts
@@ -32,6 +32,7 @@ import {
   resolveSendEnvMode,
   resolveDraftHeroState,
   scheduleEnvironmentReconnectWarning,
+  shoulderTabReserve,
   startNewThreadForProject,
   shouldDockDraftHeroForSubmission,
   shouldReleaseTimelineAnchorForToolActivity,
@@ -45,6 +46,24 @@ const projectId = ProjectId.make("project-1");
 const threadId = ThreadId.make("thread-1");
 const now = "2026-03-29T00:00:00.000Z";
 
+describe("shoulderTabReserve", () => {
+  it("ignores the top drawer when measuring the shoulder tab band", () => {
+    const elementAt = (top: number) => ({ getBoundingClientRect: () => ({ top }) }) as HTMLElement;
+    const elements = new Map<string, HTMLElement>([
+      ['[data-chat-composer-form="true"]', elementAt(20)],
+      [".chat-composer-shoulder-tab", elementAt(100)],
+      ['[data-chat-composer-main-surface="true"]', elementAt(128)],
+    ]);
+    const overlay = {
+      querySelector: (selector: string) => elements.get(selector) ?? null,
+    } as HTMLElement;
+
+    expect(shoulderTabReserve(overlay)).toBe(28);
+    elements.set(".chat-composer-tasks-tab", elementAt(100));
+    expect(shoulderTabReserve(overlay)).toBe(0);
+  });
+});
+
 describe("draft hero submission transition", () => {
   it("does not dock the composer before a background submission", () => {
     expect(
diff --git a/apps/web/src/components/ChatView.logic.ts b/apps/web/src/components/ChatView.logic.ts
index b435e7021c9b37127acbbeb0725086f08470e9cc..25a49f3efa2cbf354a5a3ba28230d79d4fe5520b 100644
--- a/apps/web/src/components/ChatView.logic.ts
+++ b/apps/web/src/components/ChatView.logic.ts
@@ -39,6 +39,17 @@ export const ENVIRONMENT_RECONNECT_WARNING_GRACE_MS = 2_000;
 
 export const LastInvokedScriptByProjectSchema = Schema.Record(ProjectId, Schema.String);
 
+export function shoulderTabReserve(overlay: HTMLElement): number {
+  if (overlay.querySelector(".chat-composer-tasks-tab")) return 0;
+  const tab = overlay.querySelector<HTMLElement>(".chat-composer-shoulder-tab");
+  const surface = overlay.querySelector<HTMLElement>('[data-chat-composer-main-surface="true"]');
+  if (!tab || !surface) return 0;
+  return Math.max(
+    0,
+    Math.round(surface.getBoundingClientRect().top - tab.getBoundingClientRect().top),
+  );
+}
+
 export function shouldDockDraftHeroForSubmission(input: {
   isDraftHeroState: boolean;
   activeThreadKey: string | null;
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 530678ba85d98cf4e00e7d95cdf21af48cc9fecd..a027a1848b30f269be0b48a358595b38a606c8c2 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -350,6 +350,7 @@ import {
   shouldDockDraftHeroForSubmission,
   shouldReleaseTimelineAnchorForToolActivity,
   shouldShowBranchMismatchBanner,
+  shoulderTabReserve,
   shouldShowPlanFollowUpPrompt,
   getStartedThreadModelChangeBlockReason,
   LAST_INVOKED_SCRIPT_BY_PROJECT_KEY,
@@ -1507,6 +1508,7 @@ function ChatViewContent(props: ChatViewProps) {
   const legendListRef = useRef<LegendListRef | null>(null);
   const [composerOverlayElement, setComposerOverlayElement] = useState<HTMLDivElement | null>(null);
   const [composerOverlayHeight, setComposerOverlayHeight] = useState(0);
+  const [scrollToEndClearance, setScrollToEndClearance] = useState(0);
   const isAtEndRef = useRef(true);
   const attachmentPreviewHandoffByMessageIdRef = useRef<Record<string, string[]>>({});
   const attachmentPreviewPromotionInFlightByMessageIdRef = useRef<Record<string, true>>({});
@@ -1514,25 +1516,6 @@ function ChatViewContent(props: ChatViewProps) {
   const feedbackUploadsInFlightRef = useRef(new Set<string>());
   const terminalUiOpenByThreadRef = useRef<Record<string, boolean>>({});
 
-  useLayoutEffect(() => {
-    if (!composerOverlayElement) return;
-
-    const updateHeight = () => {
-      const nextHeight = Math.ceil(composerOverlayElement.getBoundingClientRect().height);
-      if (nextHeight <= 0) return;
-      setComposerOverlayHeight((currentHeight) =>
-        currentHeight === nextHeight ? currentHeight : nextHeight,
-      );
-    };
-
-    updateHeight();
-    if (typeof ResizeObserver === "undefined") return;
-
-    const observer = new ResizeObserver(updateHeight);
-    observer.observe(composerOverlayElement);
-    return () => observer.disconnect();
-  }, [composerOverlayElement]);
-
   const terminalUiState = useTerminalUiStateStore((state) =>
     selectThreadTerminalUiState(state.terminalUiStateByThreadKey, routeThreadRef),
   );
@@ -4467,6 +4450,35 @@ function ChatViewContent(props: ChatViewProps) {
     activeComposerTasksProgress && activePlan && activePlan.turnId === activeLatestTurn?.turnId
       ? activePlan.steps
       : null;
+
+  useLayoutEffect(() => {
+    if (!composerOverlayElement) return;
+
+    const updateHeight = () => {
+      const nextHeight = Math.ceil(composerOverlayElement.getBoundingClientRect().height);
+      if (nextHeight <= 0) return;
+      setComposerOverlayHeight((currentHeight) =>
+        currentHeight === nextHeight ? currentHeight : nextHeight,
+      );
+      const nextClearance = Math.max(0, nextHeight - shoulderTabReserve(composerOverlayElement));
+      setScrollToEndClearance((currentClearance) =>
+        currentClearance === nextClearance ? currentClearance : nextClearance,
+      );
+    };
+
+    updateHeight();
+    if (typeof ResizeObserver === "undefined") return;
+
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(composerOverlayElement);
+    const tabObserver = new MutationObserver(updateHeight);
+    tabObserver.observe(composerOverlayElement, { childList: true, subtree: true });
+    return () => {
+      resizeObserver.disconnect();
+      tabObserver.disconnect();
+    };
+  }, [composerOverlayElement]);
+
   const autoSettleAfterDays = useClientSettings((settings) => settings.sidebarAutoSettleAfterDays);
   const autoSettleOnMerge = useClientSettings((settings) => settings.sidebarAutoSettleOnMerge);
   const linkedPullRequestStatus = useLinkedThreadPullRequest(
@@ -7148,7 +7160,7 @@ function ChatViewContent(props: ChatViewProps) {
               {showScrollToBottom && (
                 <div
                   className="pointer-events-none absolute left-1/2 z-30 flex -translate-x-1/2 justify-center py-1.5"
-                  style={{ bottom: composerOverlayHeight + 4 }}
+                  style={{ bottom: scrollToEndClearance + 4 }}
                 >
                   <Button
                     aria-label="Scroll to end"
@@ -7178,11 +7190,11 @@ function ChatViewContent(props: ChatViewProps) {
                 ref={attachDraftHeroTransitionGroupRef}
                 className="w-full ps-[calc(env(safe-area-inset-left)+0.75rem)] pe-[calc(env(safe-area-inset-right)+0.75rem)] sm:ps-[calc(env(safe-area-inset-left)+1.25rem)] sm:pe-[calc(env(safe-area-inset-right)+1.25rem)]"
               >
-                <div className="pointer-events-auto relative z-10">
+                <div className="group/composer-stack pointer-events-auto relative z-10">
                   {isDraftHeroState ? (
                     <div className="absolute inset-x-0 bottom-full z-0">
                       <div
-                        className="pb-8"
+                        className="pb-8 group-has-[.chat-composer-shoulder-tab]/composer-stack:pb-4"
                         style={
                           forceExpandedMobileComposer
                             ? {
diff --git a/apps/web/src/components/chat/ComposerStashBadge.tsx b/apps/web/src/components/chat/ComposerStashBadge.tsx
index 493cebbd5aee48f9e4fd791a492ea5333008dbe0..7682ab562fd5693b59634e9754ea07beafa65c1b 100644
--- a/apps/web/src/components/chat/ComposerStashBadge.tsx
+++ b/apps/web/src/components/chat/ComposerStashBadge.tsx
@@ -66,7 +66,7 @@ export const ComposerStashBadge = memo(function ComposerStashBadge(props: {
       aria-label={`Stashed prompts: ${props.count}. Open stash.`}
       aria-expanded={props.menuOpen}
       className={cn(
-        "chat-composer-shoulder-tab chat-composer-stash-tab absolute -top-7 right-4 z-0 inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-t-xl border border-b-0 px-3 pb-1 text-xs leading-none",
+        "chat-composer-shoulder-tab chat-composer-stash-tab absolute -top-7 right-5.5 z-0 inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-t-xl border border-b-0 px-3 pb-1 text-xs leading-none",
         "transition-[color,border-color] duration-200",
         props.menuOpen && "pointer-events-none",
         props.menuOpen || props.pulsing
diff --git a/apps/web/src/components/chat/ComposerTasksBadge.test.tsx b/apps/web/src/components/chat/ComposerTasksBadge.test.tsx
index 94e2b88151c7882f674cab616897342ad59d82f6..3f17143e53e93ba4a2d6d9448fee12038a20b1ad 100644
--- a/apps/web/src/components/chat/ComposerTasksBadge.test.tsx
+++ b/apps/web/src/components/chat/ComposerTasksBadge.test.tsx
@@ -32,8 +32,8 @@ describe("ComposerTasksBadge", () => {
     expect(markup).toContain("chat-composer-tasks-tab");
     expect(markup).toContain("rounded-t-xl");
     expect(markup).toContain("border-b-0");
-    expect(markup).toContain("left-4");
-    expect(markup).toContain("right-4");
+    expect(markup).toContain("left-5.5");
+    expect(markup).toContain("right-5.5");
     expect(markup).toContain('data-composer-task-current="true"');
     expect(markup).toContain("min-w-0 flex-1 truncate");
     expect(markup).toContain("w-20");
@@ -63,8 +63,8 @@ describe("ComposerTasksBadge", () => {
       />,
     );
 
-    expect(markup).toContain("right-28");
-    expect(markup).not.toContain("right-4");
+    expect(markup).toContain("right-30");
+    expect(markup).not.toContain("right-5.5");
   });
 
   it("has a compact inline fallback for occupied composer shoulders", () => {
@@ -124,6 +124,37 @@ describe("ComposerTasksBadge", () => {
     expect(markup).not.toContain("bg-muted-foreground/25");
   });
 
+  it("drops the step segments when they would render as a blank gap", () => {
+    const manySteps = Array.from({ length: 24 }, (_, index) => ({
+      step: `Step ${index + 1}`,
+      status: "pending" as const,
+    }));
+    const tab = renderToStaticMarkup(
+      <ComposerTasksBadge
+        expanded={false}
+        onDismiss={() => undefined}
+        onToggle={() => undefined}
+        progress={{ ...progress, totalSteps: manySteps.length }}
+        steps={manySteps}
+      />,
+    );
+    const inline = renderToStaticMarkup(
+      <ComposerTasksBadge
+        expanded={false}
+        onDismiss={() => undefined}
+        onToggle={() => undefined}
+        placement="inline"
+        progress={{ ...progress, totalSteps: manySteps.length }}
+        steps={manySteps}
+      />,
+    );
+
+    expect(tab).not.toContain("w-20");
+    expect(tab).toContain("1/24");
+    expect(inline).not.toContain("w-10");
+    expect(inline).toContain("1/24");
+  });
+
   it("keeps every long-list task inside the bounded scroll region", () => {
     const longSteps = Array.from({ length: 20 }, (_, index) => ({
       step: `Task ${index + 1}`,
diff --git a/apps/web/src/components/chat/ComposerTasksBadge.tsx b/apps/web/src/components/chat/ComposerTasksBadge.tsx
index 2a3fa8a6c214a6fd6f1bc943cd1ab21bca391613..d73ce819d82a12ae62f91640e66fdaa3ef030cb8 100644
--- a/apps/web/src/components/chat/ComposerTasksBadge.tsx
+++ b/apps/web/src/components/chat/ComposerTasksBadge.tsx
@@ -17,6 +17,8 @@ export interface ComposerTaskStep {
   readonly status: "pending" | "inProgress" | "completed";
 }
 
+const MAX_TASK_SEGMENTS = 10;
+
 function keyedTaskSteps(steps: readonly ComposerTaskStep[]) {
   const occurrences = new Map<string, number>();
   return steps.map((step) => {
@@ -33,7 +35,7 @@ function TaskSegments({
   readonly className?: string;
   readonly steps: readonly ComposerTaskStep[];
 }) {
-  if (steps.length <= 1) return null;
+  if (steps.length <= 1 || steps.length > MAX_TASK_SEGMENTS) return null;
 
   return (
     <span aria-hidden className={cn("flex w-10 shrink-0 items-center gap-0.5", className)}>
@@ -116,8 +118,8 @@ export const ComposerTasksBadge = memo(function ComposerTasksBadge({
   return (
     <div
       className={cn(
-        "chat-composer-shoulder-tab chat-composer-tasks-tab absolute -top-7 left-4 z-0 flex h-8 items-center gap-1 rounded-t-xl border border-b-0 px-2 pb-1 text-xs leading-none text-muted-foreground",
-        hasTrailingShoulder ? "right-28" : "right-4",
+        "chat-composer-shoulder-tab chat-composer-tasks-tab absolute -top-7 left-5.5 z-0 flex h-8 items-center gap-1 rounded-t-xl border border-b-0 px-2 pb-1 text-xs leading-none text-muted-foreground",
+        hasTrailingShoulder ? "right-30" : "right-5.5",
         allDone && "text-foreground",
       )}
       data-composer-tasks-badge="true"
-- 
2.54.0