fix(web): keep long task drawers usable on small screens

apps/web/src/components/chat/ComposerTasksBadge.test.tsx

@@ -98,7 +98,12 @@ describe("ComposerTasksBadge", () => {
     expect(markup).toContain('data-chat-composer-tasks-drawer="true"');
     expect(markup).not.toContain("data-variant");
     expect(markup).toContain('aria-expanded="true"');
+    expect(markup).toContain('aria-label="Collapse tasks. 1 of 3 complete."');
     expect(markup).toContain('role="list"');
+    expect(markup).toContain('data-composer-tasks-list="true"');
+    expect(markup).toContain("max-h-[min(24rem,40dvh)]");
+    expect(markup).toContain("overflow-y-auto");
+    expect(markup).toContain("overscroll-contain");
     expect(markup).toContain("Inspect the composer");
     expect(markup).toContain('data-composer-task-duration="true"');
     expect(markup).toContain("ml-auto w-10");
@@ -107,13 +112,32 @@ describe("ComposerTasksBadge", () => {
     expect(markup).toContain("Attach task progress");
     expect(markup).toContain("Verify the result");
     expect(markup).toContain("lucide-list-todo");
+    expect(markup).toContain("lucide-chevron-down");
     expect(markup).toContain('aria-label="Dismiss tasks for this turn"');
-    expect(markup).not.toContain("lucide-chevron");
     expect(markup).not.toContain("bg-success");
     expect(markup).not.toContain("bg-primary");
     expect(markup).not.toContain("bg-muted-foreground/25");
   });
 
+  it("keeps every long-list task inside the bounded scroll region", () => {
+    const longSteps = Array.from({ length: 20 }, (_, index) => ({
+      step: `Task ${index + 1}`,
+      status: index === 0 ? ("inProgress" as const) : ("pending" as const),
+    }));
+    const markup = renderToStaticMarkup(
+      <ComposerTasksDrawer
+        onCollapse={() => undefined}
+        onDismiss={() => undefined}
+        progress={{ step: "Task 1", completedSteps: 0, totalSteps: longSteps.length }}
+        steps={longSteps}
+      />,
+    );
+
+    const listStart = markup.indexOf('data-composer-tasks-list="true"');
+    expect(listStart).toBeGreaterThan(markup.indexOf('aria-label="Collapse tasks.'));
+    expect(markup.slice(listStart)).toContain("Task 20");
+  });
+
   it("does not render an empty task count", () => {
     const markup = renderToStaticMarkup(
       <ComposerTasksBadge

apps/web/src/components/chat/ComposerTasksBadge.tsx

@@ -1,4 +1,4 @@
-import { ListTodoIcon, XIcon } from "lucide-react";
+import { ChevronDownIcon, ListTodoIcon, XIcon } from "lucide-react";
 import { memo } from "react";
 
 import { formatDuration } from "../../session-logic";
@@ -179,6 +179,7 @@ export const ComposerTasksDrawer = memo(function ComposerTasksDrawer({
         <button
           type="button"
           aria-expanded="true"
+          aria-label={`Collapse tasks. ${progress.completedSteps} of ${progress.totalSteps} complete.`}
           className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 self-stretch text-left text-xs text-muted-foreground hover:text-foreground"
           onClick={onCollapse}
           onPointerDown={(event) => event.preventDefault()}
@@ -188,6 +189,7 @@ export const ComposerTasksDrawer = memo(function ComposerTasksDrawer({
           <span className="tabular-nums">
             {progress.completedSteps}/{progress.totalSteps}
           </span>
+          <ChevronDownIcon aria-hidden className="ml-auto size-3.5 shrink-0" />
         </button>
         <Button
           size="icon-micro"
@@ -200,7 +202,11 @@ export const ComposerTasksDrawer = memo(function ComposerTasksDrawer({
           <XIcon aria-hidden className="size-3" />
         </Button>
       </div>
-      <div className="space-y-px px-3 pb-4 sm:px-4" role="list">
+      <div
+        className="max-h-[min(24rem,40dvh)] space-y-px overflow-y-auto overscroll-contain px-3 pb-4 sm:px-4"
+        data-composer-tasks-list="true"
+        role="list"
+      >
         {keyedTaskSteps(steps).map(({ key, step }) => (
           <div key={key} className="flex items-baseline gap-2 text-xs leading-5" role="listitem">
             <span