From 3bcb7de7c0de96f090ef58b00e32765f2c5f5ecd Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Wed, 18 Mar 2026 14:49:50 +0000
Subject: [PATCH] fix(site): normalize chat message spacing for visual
 consistency (#23222)

---
 .../AgentDetail/ConversationTimeline.tsx        | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx b/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
index 8637cdf304..9848265bcb 100644
--- a/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
+++ b/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
@@ -338,7 +338,7 @@ const ChatMessageItem = memo<{
 			>
 				<ConversationItem {...conversationItemProps}>
 					{isUser ? (
-						<Message className="my-2 w-full max-w-none">
+						<Message className="w-full max-w-none">
 							<MessageContent
 								className={cn(
 									"group/msg rounded-lg border border-solid border-border-default bg-surface-secondary px-3 py-2 font-sans shadow-sm transition-shadow",
@@ -762,7 +762,7 @@ const StickyUserMessage: FC<{
 			<div
 				ref={containerRef}
 				className={cn(
-					"relative px-3 -mx-3 pt-2 pb-2",
+					"relative px-3 -mx-3 -mt-3",
 					!isTooTall && "sticky z-10",
 					!isReady && "invisible",
 					isStuck && !isTooTall && "pointer-events-none",
@@ -816,14 +816,11 @@ const StickyUserMessage: FC<{
 									"linear-gradient(to bottom, black calc(var(--clip-h, 100%) + 24px), transparent calc(var(--clip-h, 100%) + 48px))",
 							}}
 						/>
-						{/* Content layer: px-3 pt-2 matches the
-						    sticky container's padding so the
-						    overlay aligns with the flow element.
-						    will-change promotes to GPU layer. */}
-						<div
-							className="relative px-3 pt-2 pointer-events-auto"
-							style={{ willChange: "max-height" }}
-						>
+						{/* Content layer: px-3 matches the sticky
+							    container's padding so the overlay aligns
+							    with the flow element. will-change promotes
+							    to GPU layer. */}
+						<div className="relative px-3 pointer-events-auto will-change-[max-height]">
 							<ChatMessageItem
 								message={message}
 								parsed={parsed}