From c015ea8595e616e81131e072cd7f3b8a0d9a09f3 Mon Sep 17 00:00:00 2001
From: Willhong <hbilly2002@gmail.com>
Date: Fri, 21 Aug 2026 08:37:02 +0900
Subject: [PATCH 1/2] fix(t3sidebar): scroll long child menus

---
 examples/plugins/t3sidebar/src/SubagentsChip.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/plugins/t3sidebar/src/SubagentsChip.tsx b/examples/plugins/t3sidebar/src/SubagentsChip.tsx
index 90574b1c94..336b102439 100644
--- a/examples/plugins/t3sidebar/src/SubagentsChip.tsx
+++ b/examples/plugins/t3sidebar/src/SubagentsChip.tsx
@@ -62,7 +62,7 @@ export function SubagentsChip({
           <div
             role="menu"
             aria-label="Child threads"
-            className="absolute right-0 top-9 z-50 w-80 overflow-hidden rounded-xl border border-border bg-popover shadow-lg"
+            className="absolute right-0 top-9 z-50 flex max-h-[min(32rem,calc(100dvh-6rem))] w-80 flex-col overflow-hidden rounded-xl border border-border bg-popover shadow-lg"
           >
             <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
               <span className="text-xs font-semibold">Children</span>
@@ -70,7 +70,7 @@ export function SubagentsChip({
                 {children.length}
               </span>
             </div>
-            <ul className="flex flex-col gap-px p-1.5 pt-0.5">
+            <ul className="flex min-h-0 touch-pan-y flex-col gap-px overflow-y-auto overscroll-contain p-1.5 pt-0.5 [-webkit-overflow-scrolling:touch]">
               {children.map((child) => (
                 <li key={child.id} className="list-none">
                   <button

From 5a1fee5a4d93eb0142410648ef2cad52cb642cb2 Mon Sep 17 00:00:00 2001
From: Willhong <hbilly2002@gmail.com>
Date: Fri, 21 Aug 2026 08:37:05 +0900
Subject: [PATCH 2/2] test(t3sidebar): cover long child menus

---
 .../t3sidebar/src/SubagentsChip.test.tsx      | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 examples/plugins/t3sidebar/src/SubagentsChip.test.tsx

diff --git a/examples/plugins/t3sidebar/src/SubagentsChip.test.tsx b/examples/plugins/t3sidebar/src/SubagentsChip.test.tsx
new file mode 100644
index 0000000000..f859f5b120
--- /dev/null
+++ b/examples/plugins/t3sidebar/src/SubagentsChip.test.tsx
@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { loadPluginApp, renderSlot } from "@get-bb/plugin-sdk/testing/app";
+import type { PluginSidebarThread } from "@get-bb/plugin-sdk";
+
+const app = await loadPluginApp(() => import("../app"));
+const childrenChip = app.threadHeaderActions.find(
+  (slot) => slot.id === "children",
+)!;
+
+function thread(
+  overrides: Partial<PluginSidebarThread> = {},
+): PluginSidebarThread {
+  return {
+    id: "thr_1",
+    projectId: "proj_1",
+    title: "A thread",
+    titleFallback: null,
+    parentThreadId: null,
+    sectionId: null,
+    originKind: null,
+    originPluginId: null,
+    providerId: "codex",
+    hasPendingInteraction: false,
+    activity: {
+      workflows: 0,
+      backgroundAgents: 0,
+      backgroundCommands: 0,
+      planMode: 0,
+      goals: 0,
+    },
+    indicator: "none",
+    indicatorLabel: null,
+    isUnread: false,
+    isPinned: false,
+    isArchived: false,
+    environment: null,
+    host: null,
+    createdAt: 100,
+    updatedAt: 100,
+    lastReadAt: 100,
+    latestAttentionAt: 100,
+    ...overrides,
+  };
+}
+
+afterEach(cleanup);
+
+describe("SubagentsChip child list", () => {
+  it("caps a long menu and makes the child list scrollable", () => {
+    renderSlot(
+      childrenChip,
+      {
+        threadId: "parent",
+        projectId: "proj_1",
+        isCompactViewport: true,
+      },
+      {
+        sidebarThreads: {
+          status: "ready",
+          threads: [
+            thread({ id: "parent", title: "Parent" }),
+            ...Array.from({ length: 26 }, (_, index) =>
+              thread({
+                id: `child_${index}`,
+                title: `Child ${index + 1}`,
+                parentThreadId: "parent",
+                createdAt: index,
+              }),
+            ),
+          ],
+          projects: [{ id: "proj_1", name: "bb", isPersonal: false }],
+        },
+      },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "26 child threads" }));
+
+    const menu = screen.getByRole("menu", { name: "Child threads" });
+    const list = menu.querySelector("ul");
+    expect(menu.classList.contains("flex")).toBe(true);
+    expect(
+      menu.classList.contains("max-h-[min(32rem,calc(100dvh-6rem))]"),
+    ).toBe(true);
+    expect(list?.classList.contains("min-h-0")).toBe(true);
+    expect(list?.classList.contains("overflow-y-auto")).toBe(true);
+    expect(list?.classList.contains("overscroll-contain")).toBe(true);
+    expect(list?.classList.contains("touch-pan-y")).toBe(true);
+    expect(list?.classList.contains("[-webkit-overflow-scrolling:touch]")).toBe(
+      true,
+    );
+    expect(screen.getAllByRole("menuitem")).toHaveLength(26);
+  });
+});