Snap outer timeline growth while a thread is active

apps/app/src/components/thread/timeline/ThreadTimelineRows.height.test.tsx

@@ -77,3 +77,32 @@ it("snap-syncs the timeline height when older rows are prepended", () => {
   expect(heightWrapper?.style.height).toBe("400px");
   expect(heightWrapper?.style.transitionDuration).toBe("0s");
 });
+
+it("snaps active timeline growth on fine-pointer browsers", () => {
+  vi.stubGlobal("ResizeObserver", ResizeObserverStub);
+  vi.stubGlobal("CSS", { supports: () => true });
+  const queryClient = new QueryClient();
+  const rows = [turnRow({ id: "active_turn", seq: 1, status: "pending" })];
+  const timeline = (active: boolean) => (
+    <MemoryRouter>
+      <QueryClientProvider client={queryClient}>
+        <ThreadTimelineRows
+          threadId="thr_main"
+          timelineRows={rows}
+          threadRuntimeDisplayStatus={active ? "active" : "idle"}
+          workspaceRootPath={undefined}
+        />
+      </QueryClientProvider>
+    </MemoryRouter>
+  );
+  const view = render(timeline(false));
+  const rowList = view.container.querySelector<HTMLElement>(
+    '[data-timeline-row-list="top-level"]',
+  );
+  const wrapper = rowList?.parentElement?.parentElement;
+  expect(wrapper?.style.transition).toContain("height 180ms");
+  view.rerender(timeline(true));
+  expect(wrapper?.style.transition).toContain("height 0ms");
+  view.rerender(timeline(false));
+  expect(wrapper?.style.transition).toContain("height 180ms");
+});

apps/app/src/components/thread/timeline/ThreadTimelineRows.tsx

@@ -2168,7 +2168,10 @@ function ThreadTimelineRowsForTimelineView(props: ThreadTimelineRowsProps) {
                     <TimelineWindowingEnabledContext.Provider
                       value={props.timelineWindowingEnabled ?? false}
                     >
-                      <AutoHeightContainer snapRevision={heightSnapRevision}>
+                      <AutoHeightContainer
+                        snapRevision={heightSnapRevision}
+                        animateGrowth={!scopeActive}
+                      >
                         <TimelineRowsList
                           hasOlderTimelineRows={props.hasOlderTimelineRows}
                           isLoadingOlderTimelineRows={

apps/app/src/components/ui/height-transition.tsx

@@ -214,6 +214,7 @@ export function HeightTransition({ visible, children }: HeightTransitionProps) {
 interface AutoHeightContainerProps {
   children: ReactNode;
   snapRevision?: string;
+  animateGrowth?: boolean;
 }
 
 const AUTO_HEIGHT_INITIAL_SETTLE_MS = 250;
@@ -228,9 +229,11 @@ function useSnapHeightGrowth(): boolean {
 export function AutoHeightContainer({
   children,
   snapRevision,
+  animateGrowth = true,
 }: AutoHeightContainerProps) {
   const snapGrowth = useSnapHeightGrowth();
-  const durationMs = snapGrowth ? 0 : HEIGHT_TRANSITION_DURATION_MS;
+  const durationMs =
+    snapGrowth || !animateGrowth ? 0 : HEIGHT_TRANSITION_DURATION_MS;
   const wrapperRef = useRef<HTMLDivElement>(null);
   const innerRef = useRef<HTMLDivElement>(null);
   const snapToCurrentHeightRef = useRef<(() => void) | null>(null);