From 4bb26fedcbc52956eca66df19bda779c8c802c92 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:14:50 +0000
Subject: [PATCH 1/3] fix(dashboard): Keep mobile conversations at latest

Co-Authored-By: Pierre Massat <pierre.massat@sentry.io>
---
 .../client/conversations/ConversationPage.tsx | 19 ++++++++++++++++++-
 .../conversations/transcriptBottomPinning.ts  | 16 ++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx b/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
index 98d494093..2a7507c01 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type {
   ConversationDetailReport,
   ConversationFeed,
@@ -268,6 +268,23 @@ function ConversationReplyFooter(props: {
   cancelPendingMessagesRef.current = cancelPendingMessages;
   const onPinRequestRef = useRef(props.onPinRequest);
   onPinRequestRef.current = props.onPinRequest;
+  const pendingMessageVersion = props.pendingMessages
+    .map((message) =>
+      [
+        message.inboundMessageId,
+        message.messageId,
+        message.clientStatus,
+        message.delivery,
+      ].join(":"),
+    )
+    .join("|");
+  const pendingMessageVersionRef = useRef(pendingMessageVersion);
+  useEffect(() => {
+    if (pendingMessageVersionRef.current === pendingMessageVersion) return;
+    pendingMessageVersionRef.current = pendingMessageVersion;
+    if (!window.matchMedia("(max-width: 767px)").matches) return;
+    onPinRequestRef.current();
+  }, [pendingMessageVersion]);
   const onSubmit = useCallback(
     async (message: string, idempotencyKey: string) => {
       await appendMessageRef.current.mutateAsync({
diff --git a/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts b/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts
index 596741b4c..489a2daca 100644
--- a/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts
+++ b/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts
@@ -13,6 +13,7 @@ import type { ConversationTranscript, TranscriptViewPart } from "../types";
 import { conversationTranscriptMessages } from "./eventTranscript";
 
 const BOTTOM_PROXIMITY_PX = 96;
+const MOBILE_MEDIA_QUERY = "(max-width: 767px)";
 const USER_SCROLL_DELTA_PX = 2;
 
 type ScrollRoot = HTMLElement | Window;
@@ -166,6 +167,7 @@ export function usePinnedTranscriptBottom(input: {
   const previousScrollTopRef = useRef<number | null>(null);
   const prependSnapshotRef = useRef<PrependSnapshot | null>(null);
   const pinRequestVersionRef = useRef(input.pinRequestVersion ?? 0);
+  const versionRef = useRef(input.version);
   const programmaticScrollGenerationRef = useRef(0);
   const [following, setFollowing] = useState(false);
   const [hasPendingUpdate, setHasPendingUpdate] = useState(false);
@@ -338,6 +340,20 @@ export function usePinnedTranscriptBottom(input: {
     measurePosition("measure");
   }, [measurePosition, scrollToBottom]);
 
+  useBrowserLayoutEffect(() => {
+    if (versionRef.current === input.version) return;
+    versionRef.current = input.version;
+    if (
+      typeof window === "undefined" ||
+      !window.matchMedia(MOBILE_MEDIA_QUERY).matches
+    ) {
+      return;
+    }
+    setFollowingIntent(true);
+    setHasPendingUpdate(false);
+    scrollToBottom("auto");
+  }, [input.version, scrollToBottom, setFollowingIntent]);
+
   useBrowserLayoutEffect(() => {
     const wasEnabled = enabledRef.current;
     const shouldTrack = input.enabled || wasEnabled;

From 710d334a9f64f3b24ca9bd32a1319d5d14074401 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:35:40 +0000
Subject: [PATCH 2/3] fix(dashboard): Keep mobile composer above queue expand

Pin the transcript when the pending stack resizes, keep the composer
outside the queue scroller, and anchor the reply footer to the bottom
of the mobile conversation shell.

Co-Authored-By: Pierre Massat <pierre.massat@sentry.io>
---
 .../client/conversations/ConversationPage.tsx | 54 +++++++++++--------
 .../conversations/PendingMailboxStack.tsx     | 22 +++++++-
 .../conversations/transcriptBottomPinning.ts  |  4 ++
 3 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx b/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
index 2a7507c01..a57b0ac47 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
@@ -82,10 +82,10 @@ export function ConversationPage(props: {
   }, []);
 
   return (
-    <div className="grid min-h-0 min-w-0 grid-rows-[minmax(7rem,1fr)_minmax(0,auto)]">
+    <div className="flex min-h-0 min-w-0 flex-col">
       <div
         aria-label="Conversation transcript"
-        className="min-h-0 overflow-y-auto overscroll-contain px-3 pb-3 md:px-7 md:pb-5"
+        className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 pb-3 md:px-7 md:pb-5"
         tabIndex={0}
       >
         <section className="min-w-0">
@@ -334,29 +334,39 @@ function ConversationReplyFooter(props: {
     ),
   );
 
+  const onMailboxLayoutChange = useCallback(() => {
+    if (!window.matchMedia("(max-width: 767px)").matches) return;
+    onPinRequestRef.current();
+  }, []);
+
   return (
-    <div className="min-h-0 max-h-[min(55%,24rem)] overflow-y-auto overscroll-contain px-2 py-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))] md:max-h-none md:overflow-visible md:px-7 md:py-4 md:pb-4">
-      {props.live ? (
-        <div className="mb-1.5 flex items-center gap-2 font-sans text-xs text-dashboard-text-muted md:hidden">
-          <span
-            aria-hidden="true"
-            className="size-1.5 shrink-0 animate-pulse rounded-full bg-emerald-300"
+    <div className="flex min-h-0 max-h-[min(55%,24rem)] shrink-0 flex-col overflow-hidden px-2 py-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))] md:max-h-none md:overflow-visible md:px-7 md:py-4 md:pb-4">
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain md:overflow-visible">
+        {props.live ? (
+          <div className="mb-1.5 flex items-center gap-2 font-sans text-xs text-dashboard-text-muted md:hidden">
+            <span
+              aria-hidden="true"
+              className="size-1.5 shrink-0 animate-pulse rounded-full bg-emerald-300"
+            />
+            <span>Junior is working…</span>
+          </div>
+        ) : null}
+        <div className="grid min-w-0">
+          {props.pendingAuthorization ? (
+            <PendingAuthorization authorization={props.pendingAuthorization} />
+          ) : null}
+          <PendingMailboxStack
+            cancelError={cancelError}
+            cancelPending={cancelPendingMessages.isPending}
+            conversation={props.conversation}
+            messages={props.pendingMessages}
+            onCancelQueue={hasSendingOutboxMessage ? undefined : onCancelQueue}
+            onLayoutChange={onMailboxLayoutChange}
+            onRetry={onRetry}
           />
-          <span>Junior is working…</span>
         </div>
-      ) : null}
-      <div className="grid min-w-0">
-        {props.pendingAuthorization ? (
-          <PendingAuthorization authorization={props.pendingAuthorization} />
-        ) : null}
-        <PendingMailboxStack
-          cancelError={cancelError}
-          cancelPending={cancelPendingMessages.isPending}
-          conversation={props.conversation}
-          messages={props.pendingMessages}
-          onCancelQueue={hasSendingOutboxMessage ? undefined : onCancelQueue}
-          onRetry={onRetry}
-        />
+      </div>
+      <div className="shrink-0 pt-1.5 md:pt-0">
         <ConversationComposer
           disabled={cancelPendingMessages.isPending}
           draftId={props.conversationId}
diff --git a/packages/junior-dashboard/src/client/conversations/PendingMailboxStack.tsx b/packages/junior-dashboard/src/client/conversations/PendingMailboxStack.tsx
index 28670823a..714623bbb 100644
--- a/packages/junior-dashboard/src/client/conversations/PendingMailboxStack.tsx
+++ b/packages/junior-dashboard/src/client/conversations/PendingMailboxStack.tsx
@@ -1,4 +1,10 @@
-import { useState, type ReactElement, type ReactNode } from "react";
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import {
   AlertCircle,
   Clock3,
@@ -191,9 +197,23 @@ export function PendingMailboxStack(props: {
   conversation: ConversationTranscript;
   messages: readonly ConversationMailboxMessage[];
   onCancelQueue?: () => void;
+  /** Fires after expand/collapse changes the stack height above the composer. */
+  onLayoutChange?: () => void;
   onRetry?(message: ConversationMailboxMessage): void;
 }): ReactNode {
   const [expanded, setExpanded] = useState(false);
+  const onLayoutChangeRef = useRef(props.onLayoutChange);
+  onLayoutChangeRef.current = props.onLayoutChange;
+  const hasMountedExpandedRef = useRef(false);
+  // Expand/collapse changes footer height. Pin after layout so the transcript
+  // scroll root already has the new client height.
+  useLayoutEffect(() => {
+    if (!hasMountedExpandedRef.current) {
+      hasMountedExpandedRef.current = true;
+      return;
+    }
+    onLayoutChangeRef.current?.();
+  }, [expanded]);
   const unresolvedIds = new Set(
     unresolvedPendingTranscriptMessages(
       conversationTranscriptMessages(props.conversation),
diff --git a/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts b/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts
index 489a2daca..565b0ae5c 100644
--- a/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts
+++ b/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts
@@ -414,6 +414,10 @@ export function usePinnedTranscriptBottom(input: {
       syncAfterLayoutChange();
     });
     observer.observe(contentElement);
+    // Footer growth shrinks the transcript scroll root without resizing the
+    // transcript content node. Watch the root so follow mode stays pinned.
+    const root = scrollRootFor(contentElement);
+    if (root && !isWindowRoot(root)) observer.observe(root);
     return () => observer.disconnect();
   }, [contentElement, syncAfterLayoutChange]);
 

From bec29a95193551d12bfe65e342234e9295906a91 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 05:45:15 +0000
Subject: [PATCH 3/3] fix(dashboard): Honor live mode and transcript min height

Gate mobile always-follow on live mode, and restore the grid shell so a
tall queue cannot collapse the transcript on desktop.

Co-Authored-By: PDPM <pierre.massat@sentry.io>
---
 .../src/client/conversations/ConversationPage.tsx            | 4 ++--
 .../src/client/conversations/transcriptBottomPinning.ts      | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx b/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
index 0ceec244b..038319e2c 100644
--- a/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
+++ b/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
@@ -82,10 +82,10 @@ export function ConversationPage(props: {
   }, []);
 
   return (
-    <div className="flex min-h-0 min-w-0 flex-col">
+    <div className="grid min-h-0 min-w-0 grid-rows-[minmax(7rem,1fr)_minmax(0,auto)]">
       <div
         aria-label="Conversation transcript"
-        className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 pb-3 md:px-7 md:pb-5"
+        className="min-h-0 overflow-y-auto overscroll-contain px-3 pb-3 md:px-7 md:pb-5"
         tabIndex={0}
       >
         <section className="min-w-0">
diff --git a/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts b/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts
index 565b0ae5c..a06282673 100644
--- a/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts
+++ b/packages/junior-dashboard/src/client/conversations/transcriptBottomPinning.ts
@@ -340,10 +340,13 @@ export function usePinnedTranscriptBottom(input: {
     measurePosition("measure");
   }, [measurePosition, scrollToBottom]);
 
+  // Mobile product contract: while live, new tail content always follows.
+  // Still require live mode so a completed/status-only version flip does not jump.
   useBrowserLayoutEffect(() => {
     if (versionRef.current === input.version) return;
     versionRef.current = input.version;
     if (
+      !input.enabled ||
       typeof window === "undefined" ||
       !window.matchMedia(MOBILE_MEDIA_QUERY).matches
     ) {
@@ -352,7 +355,7 @@ export function usePinnedTranscriptBottom(input: {
     setFollowingIntent(true);
     setHasPendingUpdate(false);
     scrollToBottom("auto");
-  }, [input.version, scrollToBottom, setFollowingIntent]);
+  }, [input.enabled, input.version, scrollToBottom, setFollowingIntent]);
 
   useBrowserLayoutEffect(() => {
     const wasEnabled = enabledRef.current;