From 73264801732a203840c1219d77ba0d97abbdeb83 Mon Sep 17 00:00:00 2001
From: Ethan <39577870+ethanndickson@users.noreply.github.com>
Date: Thu, 11 Jun 2026 13:36:22 +1000
Subject: [PATCH] fix(site/src/pages/AgentsPage/components/ChatsSidebar): pin
 timestamp masks (#26163)

## Summary

Pin chat relative timestamp Chromatic ignore masks to the established
`inline-block w-7 text-right` box so changing text like `46m` to `now`
does not shrink the ignored bounding rect and expose slivers of diff.

This applies the fix to the search dialog result rows and restores the
same mask on sidebar chat rows after the sidebar extraction dropped it.

## Flaky stories

- `pages/AgentsPage/ChatsSidebar: Search Dialog Keyboard Shortcut`,
opens the search dialog with recent chats visible, which renders
relative timestamps in `ChatSearchResults`.
- `pages/AgentsPage/ChatsSidebar: Section Headers Collapse`, and other
`ChatsSidebar` snapshots that render sidebar chat rows, can hit the same
timestamp mask-width drift through `ChatTreeNode`.
---
 .../ChatsSidebar/dialogs/ChatSearchResults.tsx       |  5 ++++-
 .../components/ChatsSidebar/tree/ChatTreeNode.tsx    | 12 +++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
index c49c900332..18c29f6f04 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx
@@ -297,7 +297,10 @@ const ChatSearchResultRow: FC<ChatSearchResultRowProps> = ({
 						aria-hidden="true"
 					/>
 				)}
-				{shortRelativeTime(chat.updated_at)}
+				{/* Pin the ignored mask width so Chromatic does not diff bounding rect changes. */}
+				<span data-chromatic="ignore" className="inline-block w-7 text-right">
+					{shortRelativeTime(chat.updated_at)}
+				</span>
 			</span>
 		</Link>
 	);
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
index 169eb8d0e5..9412b6a871 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
@@ -336,9 +336,15 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 												aria-hidden="true"
 											/>
 										) : (
-											<span data-chromatic="ignore">
-												{shortRelativeTime(chat.updated_at)}
-											</span>
+											<>
+												{/* Pin the ignored mask width so Chromatic does not diff bounding rect changes. */}
+												<span
+													data-chromatic="ignore"
+													className="inline-block w-7 text-right"
+												>
+													{shortRelativeTime(chat.updated_at)}
+												</span>
+											</>
 										)}
 									</span>
 								)}