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`.
This commit is contained in:
Ethan
2026-06-11 13:36:22 +10:00
committed by GitHub
parent 4e2c9f9cae
commit 7326480173
2 changed files with 13 additions and 4 deletions
@@ -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>
);
@@ -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>
)}