From e6fe9916d6ef4e29e2e09592fa2bd196f82a3444 Mon Sep 17 00:00:00 2001 From: Ethan Date: Wed, 20 May 2026 19:55:54 +1000 Subject: [PATCH] fix: pin chat timestamp chromatic ignore-mask width (#25522) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up to #25429, which wrapped `shortRelativeTime(chat.updated_at)` in `` to stop the chat row timestamp from drifting `"46m" → "5m" → "now"` across Chromatic runs. Chromatic kept flagging a sliver of change just to the left of the rendered text, even though the area looks empty. [Chromatic's docs](https://www.chromatic.com/docs/ignoring-elements/) explain why: `data-chromatic="ignore"` masks pixel diffs **inside the element's bounding rectangle**, but dimension changes of that rectangle still trigger a diff. The wrapper span has no explicit width, so it sizes to its text — `"46m"` (≈22px) shrinks to `"now"` (≈19px), the mask shrinks by ~3px on its left edge, and that exposed strip is what Chromatic was reporting. Fix: pin the wrapper to `inline-block w-7 text-right`. `w-7` matches the surrounding `w-7` column, and `text-right` keeps the trailing edge anchored so the bounding rect is identical regardless of which `shortRelativeTime` branch fired. The unread-dot branch is untouched and keeps its own Chromatic coverage. --- .../components/Sidebar/AgentsSidebar.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx b/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx index 32a27065aa..f3fe3cec34 100644 --- a/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx +++ b/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx @@ -769,9 +769,17 @@ const ChatTreeNode: FC = ({ chat, isChildNode }) => { aria-hidden="true" /> ) : ( - // data-chromatic="ignore" keeps Chromatic snapshots - // stable as wall-clock time advances (e.g. "now" → "5m"). - + // data-chromatic="ignore" disables pixel diffing + // inside the span, but Chromatic still diffs the + // span's bounding rect. Pin the box to a fixed width + // (with the text right-aligned so the trailing edge + // stays anchored to the column) so transitions like + // "46m" → "now" do not shrink the mask and expose + // stale pixels along its edge. + {shortRelativeTime(chat.updated_at)} )}