From 6da4b43f393d118684aee9c4b7bc79561ad73e5e Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Tue, 3 Nov 2026 14:40:09 +0000
Subject: [PATCH] fix(dashboard): Center the jump to latest pill above the
 composer

On desktop the control was fixed to the viewport corner, so it sat on top
of the details panel. Keep it sticky in the transcript column on every
breakpoint, centered on the conversation, and show a labeled pill.

Co-Authored-By: Thomas Jiang <20501235+thomasjiangcy@users.noreply.github.com>
---
 .../client/conversations/TranscriptView.tsx   | 47 ++++++-------------
 1 file changed, 15 insertions(+), 32 deletions(-)

diff --git a/packages/junior-dashboard/src/client/conversations/TranscriptView.tsx b/packages/junior-dashboard/src/client/conversations/TranscriptView.tsx
index b08cbfa5d3..9cd59f6fb8 100644
--- a/packages/junior-dashboard/src/client/conversations/TranscriptView.tsx
+++ b/packages/junior-dashboard/src/client/conversations/TranscriptView.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
-import { ArrowDownToLine } from "lucide-react";
+import { ArrowDown } from "lucide-react";
 
 import type {
   ConversationTranscript,
@@ -8,11 +8,6 @@ import type {
 } from "../types";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { Button } from "../components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../components/ui/tooltip";
 import { ConversationTranscriptView } from "./ConversationTranscript";
 import { ConversationEventLog } from "./ConversationEventLog";
 import {
@@ -191,33 +186,21 @@ function JumpToLatestButton(props: {
 }) {
   if (!props.visible) return null;
 
-  const label = props.hasPendingUpdate
-    ? "Jump to latest update"
-    : "Jump to latest";
-
   return (
-    <div className="pointer-events-none sticky bottom-3 z-20 flex h-0 justify-center px-3 md:fixed md:inset-x-auto md:bottom-6 md:right-8 md:h-auto md:justify-end md:px-0">
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              aria-label={label}
-              className="pointer-events-auto relative -translate-y-full rounded-lg !border !border-dashboard-border-emphasis !bg-dashboard-surface-active text-dashboard-text shadow-[0_6px_24px_rgba(0,0,0,0.36)] hover:!border-dashboard-border-interactive hover:!bg-dashboard-surface-hover hover:!text-dashboard-text md:translate-y-0"
-              onClick={props.onClick}
-              size="icon"
-            >
-              <ArrowDownToLine aria-hidden="true" size={16} strokeWidth={2} />
-              {props.hasPendingUpdate ? (
-                <span
-                  aria-hidden="true"
-                  className="absolute right-1.5 top-1.5 size-2 bg-emerald-300"
-                />
-              ) : null}
-            </Button>
-          }
-        />
-        <TooltipContent size="compact">{label}</TooltipContent>
-      </Tooltip>
+    // Sticky offsets count from inside the scroll region's bottom padding
+    // (pb-4 / md:pb-6). The negative offsets cancel most of it, so the pill
+    // sits 12px (16px on md) above the composer, centered on the transcript.
+    <div className="pointer-events-none sticky -bottom-2.5 z-20 flex h-0 justify-center md:-bottom-5">
+      <Button
+        aria-label={
+          props.hasPendingUpdate ? "Jump to latest update" : "Jump to latest"
+        }
+        className="pointer-events-auto h-8 -translate-y-full gap-1.5 rounded-full pl-3 pr-3.5 text-xs shadow-[0_4px_16px_rgba(0,0,0,0.12)]"
+        onClick={props.onClick}
+      >
+        <ArrowDown aria-hidden="true" size={14} strokeWidth={2} />
+        Jump to latest
+      </Button>
     </div>
   );
 }