Commit 9e1bc36a0843699db54ee28abbdac70584ae8f33 | the-knife

author	Theo Browne <me@t3.gg> 2026-09-03 19:36:10-07:00
committer	GitHub <noreply@github.com> 2026-09-03 19:36:10-07:00
log	9e1bc36a0843699db54ee28abbdac70584ae8f33
tree	8a24568bc0591d8ae3d44a76eba091727aa7fe4c
parent	710f6dc417ebf303eede3df3605a6938482d83ab
signature	Signed by PGP key B5690EEEBB952194

fix(web): keep the last message visible when the resting composer expands (#9553)

Scrolling a long thread to the end with the composer at rest landed flush
against the short composer. The expansion that followed then covered the
last rows, because the timeline reserves only the live overlay height and
does not move for footer growth.

The timeline now keeps the expanded composer's height clear while the
composer rests, so expanding it again changes nothing above the composer.
The composer reports its resting flag from a layout effect and publishes a
fresh overlay height whenever that flag changes, so the reservation is
always computed from a height that belongs to the same layout.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

5 files changed, 133 insertions(+), 24 deletions(-)

apps
- web
  - src
    components
    ChatView.tsx
    chat
    ChatComposer.tsx
    composerFooterLayout.test.ts
    composerFooterLayout.ts
docs
- user
  - composer.md

apps/web/src/components/ChatView.tsx+38-5

 @@ -298,6 +298,7 @@ import { PullRequestThreadDialog } from "./PullRequestThreadDialog";
 import { MessagesTimeline } from "./chat/MessagesTimeline";
 import type { AssistantCitationRequest } from "./chat/AssistantCitationSource";
 import { resolveTimelineIsAtEnd } from "./chat/MessagesTimeline.logic";
+import { resolveComposerTimelineInset } from "./composerFooterLayout";
 import { ChatHeader } from "./chat/ChatHeader";
 import { PanelLayoutControls, RightPanelMaximizeControl } from "./chat/PanelLayoutControls";
 import { expandedImageKey, type ExpandedImagePreview } from "./chat/ExpandedImagePreview";
 @@ -1628,6 +1629,12 @@ function ChatViewContent(props: ChatViewProps) {
   const [composerOverlayElement, setComposerOverlayElement] = useState<HTMLDivElement | null>(null);
   const [composerOverlayHeight, setComposerOverlayHeight] = useState(0);
   const composerOverlayHeightRef = useRef(0);
+  // Space the timeline keeps clear above its end. Tracks the overlay while the
+  // composer is expanded and holds that height while it rests, so the resting
+  // composer never exposes rows that its expansion will cover.
+  const [composerTimelineInset, setComposerTimelineInset] = useState(0);
+  const composerTimelineInsetRef = useRef(0);
+  const composerRestingRef = useRef(false);
   const [scrollToEndClearance, setScrollToEndClearance] = useState(0);
   const isAtEndRef = useRef(true);
   const isTimelineAtLogicalEnd = useCallback(() => isAtEndRef.current, []);
 @@ -4459,11 +4466,11 @@ function ChatViewContent(props: ChatViewProps) {
       return getAnchoredTurnMetrics({
         state,
         anchorIndex,
-        composerOverlayHeight,
+        composerOverlayHeight: composerTimelineInset,
         anchorOffset: CHAT_TIMELINE_ANCHOR_OFFSET,
       });
     },
-    [composerOverlayHeight],
+    [composerTimelineInset],
   );
   const timelineRealContentOverflowsViewport = useCallback(
     (list?: LegendListRef | null) => {
 @@ -4488,11 +4495,11 @@ function ChatViewContent(props: ChatViewProps) {
       const realContentBottom = lastRowTop + Math.max(1, lastRowHeight);
       const visibleScrollLength = Math.max(
         0,
-        (state.scrollLength ?? 0) - composerOverlayHeight - CHAT_TIMELINE_ANCHOR_OFFSET,
+        (state.scrollLength ?? 0) - composerTimelineInset - CHAT_TIMELINE_ANCHOR_OFFSET,
       );
       return realContentBottom > visibleScrollLength;
     },
-    [composerOverlayHeight],
+    [composerTimelineInset],
   );
   const pageScrollControllerRef = useRef<ReturnType<typeof createPageScrollController> | null>(
     null,
 @@ -4964,10 +4971,35 @@ function ChatViewContent(props: ChatViewProps) {
       composerOverlayHeightRef.current = nextHeight;
       setComposerOverlayHeight(nextHeight);
     }
+    const nextInset = resolveComposerTimelineInset({
+      currentInset: composerTimelineInsetRef.current,
+      overlayHeight: nextHeight,
+      isResting: composerRestingRef.current,
+    });
+    if (composerTimelineInsetRef.current !== nextInset) {
+      composerTimelineInsetRef.current = nextInset;
+      setComposerTimelineInset(nextInset);
+    }
     setScrollToEndClearance((currentClearance) =>
       currentClearance === nextHeight ? currentClearance : nextHeight,
     );
   }, []);
+  // The composer reports its resting flag from a layout effect, which runs
+  // before this component's own layout effects and before any resize
+  // observation, so every measurement below sees the flag for its layout.
+  // Only the flag is stored here: the stored height still belongs to the
+  // previous layout, and the composer publishes the new layout's height
+  // itself once it has measured it.
+  const onComposerRestingChange = useCallback((resting: boolean) => {
+    composerRestingRef.current = resting;
+  }, []);
+  // A held reservation belongs to the previous thread's draft. Rebuild it from
+  // this thread's overlay so a tall draft elsewhere does not pad this one.
+  useLayoutEffect(() => {
+    if (!composerOverlayElement) return;
+    composerTimelineInsetRef.current = 0;
+    publishComposerOverlayHeight(composerOverlayElement.getBoundingClientRect().height);
+  }, [activeThreadKey, composerOverlayElement, publishComposerOverlayHeight]);
   useLayoutEffect(() => {
     if (!composerOverlayElement) return;
 @@ -7775,7 +7807,7 @@ function ChatViewContent(props: ChatViewProps) {
                 }
                 anchorMessageId={timelineAnchorMessageId}
                 onAnchorReady={onTimelineAnchorReady}
-                contentInsetEndAdjustment={composerOverlayHeight}
+                contentInsetEndAdjustment={composerTimelineInset}
                 liveFollowEnabled={timelineLiveFollowEnabled}
                 onIsAtEndChange={onIsAtEndChange}
                 onManualNavigation={cancelTimelineLiveFollowForUserNavigation}
 @@ -7923,6 +7955,7 @@ function ChatViewContent(props: ChatViewProps) {
                             getTimelineScrollableNode={getTimelineScrollableNode}
                             isTimelineAtLogicalEnd={isTimelineAtLogicalEnd}
                             onComposerOverlayHeightChange={publishComposerOverlayHeight}
+                            onRestingChange={onComposerRestingChange}
                             promptRef={promptRef}
                             composerImagesRef={composerImagesRef}
                             composerFilesRef={composerFilesRef}

apps/web/src/components/chat/ChatComposer.tsx+40-17

 @@ -251,12 +251,14 @@ const COMPOSER_RESTING_CONTROLS_ARRIVAL_DRIFT_PX = 4;
 function useComposerRestingTransition(
   isCollapsed: boolean,
+  isResting: boolean,
   restingControlsRef: React.RefObject<HTMLDivElement | null>,
   onOverlayHeightChange: (height: number) => void,
 ) {
   const elementRef = useRef<HTMLDivElement>(null);
   const isCollapsedRef = useRef(isCollapsed);
   const previousCollapsedRef = useRef(isCollapsed);
+  const previousRestingRef = useRef(isResting);
   const previousHeightRef = useRef<number | null>(null);
   const previousContentOffsetsRef = useRef<{
     promptFromTop: number | null;
 @@ -355,6 +357,15 @@ function useComposerRestingTransition(
       const nextRect = element.getBoundingClientRect();
       const nextHeight = nextRect.height;
+      // The chat view resize-observes the overlay to place the timeline
+      // inset, the scroll-to-end pill, and the mini player. Publishing the
+      // destination height here turns that feedback into one update instead
+      // of a ChatView re-render on every animation frame.
+      const overlay = element.closest<HTMLElement>('[data-chat-composer-overlay="true"]');
+      const overlayHeight = overlay?.getBoundingClientRect().height ?? null;
+      if (overlayHeight !== null) {
+        onOverlayHeightChange(overlayHeight);
+      }
       const nextPromptRect = prompt?.getBoundingClientRect() ?? null;
       const nextPromptTop = nextPromptRect?.top ?? null;
       const nextActionTop = action?.getBoundingClientRect().top ?? null;
 @@ -385,18 +396,13 @@ function useComposerRestingTransition(
         element.style.overflow = "clip";
         surface.style.height = "100%";
-        // The chat view resize-observes the overlay to place the timeline
+        // Pinning the overlay at the destination height keeps the resize
-        // inset, the scroll-to-end pill, and the mini player. Pinning the
+        // observer quiet for the tween; bottom alignment keeps the animating
-        // overlay at the destination height turns that feedback into one
+        // surface glued to the overlay's stable bottom edge. The pin lasts
-        // update instead of a ChatView re-render on every animation frame;
+        // only for the tween so later attachment, thread, font, and viewport
-        // bottom alignment keeps the animating surface glued to the overlay's
+        // changes remain natural.
-        // stable bottom edge. The pin lasts only for the tween so later
+        if (overlay && overlayHeight !== null) {
-        // attachment, thread, font, and viewport changes remain natural.
+          overlay.style.height = `${String(overlayHeight)}px`;
-        const overlay = element.closest<HTMLElement>('[data-chat-composer-overlay="true"]');
-        let pinnedOverlayHeight: number | null = null;
-        if (overlay) {
-          pinnedOverlayHeight = overlay.getBoundingClientRect().height;
-          overlay.style.height = `${String(pinnedOverlayHeight)}px`;
           overlay.style.display = "flex";
           overlay.style.flexDirection = "column";
           overlay.style.justifyContent = "flex-end";
 @@ -430,11 +436,6 @@ function useComposerRestingTransition(
         );
         animationRef.current = animation;
         animationTargetHeightRef.current = nextHeight;
-        // Publish the destination overlay geometry in the same layout pass;
-        // ResizeObserver remains the fallback for non-transition changes.
-        if (pinnedOverlayHeight !== null) {
-          onOverlayHeightChange(pinnedOverlayHeight);
-        }
         const animatedRect = element.getBoundingClientRect();
         const previousPromptTop =
 @@ -612,6 +613,18 @@ function useComposerRestingTransition(
     };
   }, [isCollapsed, transitionToCurrentGeometry]);
+  // The resting flag can change while the collapsed layout stays the same,
+  // for example when an unfocused thread crosses the phone breakpoint. The
+  // chat view pairs overlay heights with that flag, so republish the natural
+  // height for the new flag. A transition in flight publishes its own.
+  useLayoutEffect(() => {
+    if (previousRestingRef.current === isResting) return;
+    previousRestingRef.current = isResting;
+    if (animationRef.current) return;
+    const overlay = elementRef.current?.closest<HTMLElement>('[data-chat-composer-overlay="true"]');
+    if (overlay) onOverlayHeightChange(overlay.getBoundingClientRect().height);
+  }, [isResting, onOverlayHeightChange]);
   useLayoutEffect(() => {
     const element = elementRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
 @@ -1232,6 +1245,11 @@ export interface ChatComposerProps {
   getTimelineScrollableNode: () => HTMLElement | null;
   isTimelineAtLogicalEnd: () => boolean;
   onComposerOverlayHeightChange: (height: number) => void;
+  /**
+   * Whether the desktop resting layout is active. Reported from a layout
+   * effect, so it is current before the chat view measures the overlay.
+   */
+  onRestingChange: (resting: boolean) => void;
   // Refs the parent needs kept in sync
   promptRef: React.RefObject<string>;
 @@ -1336,6 +1354,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     getTimelineScrollableNode,
     isTimelineAtLogicalEnd,
     onComposerOverlayHeightChange,
+    onRestingChange,
     promptRef,
     composerRef,
     composerImagesRef,
 @@ -3584,6 +3603,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   useLayoutEffect(() => {
     onRestingControlsVisibilityChange(composerControlsVisibleInStrip);
   }, [composerControlsVisibleInStrip, onRestingControlsVisibilityChange]);
+  useLayoutEffect(() => {
+    onRestingChange(isComposerResting);
+  }, [isComposerResting, onRestingChange]);
   const restingImagePreviewCounts = getRestingComposerImagePreviewCounts(
     standaloneComposerImages.length,
   );
 @@ -3639,6 +3661,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     ) : null;
   const composerMainSurfaceRef = useComposerRestingTransition(
     composerControlsInStrip,
+    isComposerResting,
     restingComposerControlsRef,
     onComposerOverlayHeightChange,
   );

apps/web/src/components/composerFooterLayout.test.ts+22

...	@@ -4,7 +4,9 @@ import { resolveContextStripLabelsCompact } from "./BranchToolbar.logic";	...	@@ -4,7 +4,9 @@ import { resolveContextStripLabelsCompact } from "./BranchToolbar.logic";
4	import {	4	import {
5	COMPOSER_FOOTER_COMPACT_BREAKPOINT_PX,	5	COMPOSER_FOOTER_COMPACT_BREAKPOINT_PX,
6	COMPOSER_FOOTER_WIDE_ACTIONS_COMPACT_BREAKPOINT_PX,	6	COMPOSER_FOOTER_WIDE_ACTIONS_COMPACT_BREAKPOINT_PX,
		7	COMPOSER_RESTING_EXPANSION_MIN_PX,
7	getRestingComposerImagePreviewCounts,	8	getRestingComposerImagePreviewCounts,
		9	resolveComposerTimelineInset,
8	resolveRestingComposerControlsLayout,	10	resolveRestingComposerControlsLayout,
9	resolveRestingComposerControlsNaturalWidth,	11	resolveRestingComposerControlsNaturalWidth,
10	shouldAnimateComposerRestingTransition,	12	shouldAnimateComposerRestingTransition,
...	@@ -74,6 +76,26 @@ describe("shouldUseCompactComposerPrimaryActions", () => {	...	@@ -74,6 +76,26 @@ describe("shouldUseCompactComposerPrimaryActions", () => {
74	});	76	});
75	});	77	});
76		78
		79	describe("resolveComposerTimelineInset", () => {
		80	it("follows the expanded overlay height", () => {
		81	expect(
		82	resolveComposerTimelineInset({ currentInset: 160, overlayHeight: 140, isResting: false }),
		83	).toBe(140);
		84	});
		85
		86	it("keeps a larger expanded reservation while resting", () => {
		87	expect(
		88	resolveComposerTimelineInset({ currentInset: 200, overlayHeight: 60, isResting: true }),
		89	).toBe(200);
		90	});
		91
		92	it("reserves the empty expansion when no larger height is known", () => {
		93	expect(
		94	resolveComposerTimelineInset({ currentInset: 0, overlayHeight: 60, isResting: true }),
		95	).toBe(60 + COMPOSER_RESTING_EXPANSION_MIN_PX);
		96	});
		97	});
		98
77	describe("shouldUseRestingComposerLayout", () => {	99	describe("shouldUseRestingComposerLayout", () => {
78	const resting = {	100	const resting = {
79	isExistingThread: true,	101	isExistingThread: true,

apps/web/src/components/composerFooterLayout.ts+30

...	@@ -48,6 +48,36 @@ export function shouldUseRestingComposerLayout(input: {	...	@@ -48,6 +48,36 @@ export function shouldUseRestingComposerLayout(input: {
48	return input.isExistingThread && !input.isMobileViewport && collapsed && !input.hasExpandedChrome;	48	return input.isExistingThread && !input.isMobileViewport && collapsed && !input.hasExpandedChrome;
49	}	49	}
50		50
		51	/**
		52	* How much taller the empty expanded composer is than its resting row on
		53	* desktop widths, from the layout classes in ChatComposer: the body loses
		54	* 8px of top padding, the prompt clamps from min-h-17.5 (70px) to 32px, and
		55	* the 48px footer leaves flow.
		56	*/
		57	export const COMPOSER_RESTING_EXPANSION_MIN_PX = 94;
		58
		59	/**
		60	* The space the timeline reserves at its end for the composer overlay.
		61	*
		62	* The overlay is measured live, but a resting composer is much shorter than
		63	* an expanded one. Reserving only the resting height lets a scroll to the end
		64	* land flush against the short composer, and the expansion that follows then
		65	* covers the last rows because the timeline never moves for footer growth.
		66	* While resting, the reservation keeps the last expanded height, or at least
		67	* the resting height plus the empty expansion, so expanding again changes
		68	* nothing above the composer. An expanded measurement is authoritative and
		69	* may shrink it.
		70	*/
		71	export function resolveComposerTimelineInset(input: {
		72	currentInset: number;
		73	overlayHeight: number;
		74	isResting: boolean;
		75	}): number {
		76	return input.isResting
		77	? Math.max(input.currentInset, input.overlayHeight + COMPOSER_RESTING_EXPANSION_MIN_PX)
		78	: input.overlayHeight;
		79	}
		80
51	export function shouldAnimateComposerRestingTransition(input: {	81	export function shouldAnimateComposerRestingTransition(input: {
52	hasCompletedInitialLayout: boolean;	82	hasCompletedInitialLayout: boolean;
53	stateChanged: boolean;	83	stateChanged: boolean;

docs/user/composer.md+3-2

...	@@ -55,8 +55,9 @@ On web and desktop, an existing thread settles its composer into a single-line r	...	@@ -55,8 +55,9 @@ On web and desktop, an existing thread settles its composer into a single-line r
55	the composer loses focus. At wider sizes, scrolling the conversation also rests a focused composer,	55	the composer loses focus. At wider sizes, scrolling the conversation also rests a focused composer,
56	except when scrolling toward the end while already there. When the thread-context strip has room,	56	except when scrolling toward the end while already there. When the thread-context strip has room,
57	the model and mode controls stay available beside the thread context; otherwise they return when the	57	the model and mode controls stay available beside the thread context; otherwise they return when the
58	composer is focused. Focus the composer or start typing to expand it again. New-thread layouts keep	58	composer is focused. Focus the composer or start typing to expand it again. The conversation keeps
59	the full composer. Settings → General → Collapse composer chooses which triggers rest it:	59	the expanded composer's space clear above its last message while the composer rests, so expanding it
		60	again never covers what you scrolled to. New-thread layouts keep the full composer. Settings → General → Collapse composer chooses which triggers rest it:
60	On unfocus, On scroll, both, or neither. With neither selected the composer stays expanded.	61	On unfocus, On scroll, both, or neither. With neither selected the composer stays expanded.
61		62
62	At phone-sized web or desktop window widths, existing threads animate between their compact and	63	At phone-sized web or desktop window widths, existing threads animate between their compact and