fix: pin chat timestamp chromatic ignore-mask width (#25522)

Follow-up to #25429, which wrapped `shortRelativeTime(chat.updated_at)`
in `<span data-chromatic="ignore">` 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.
This commit is contained in:
Ethan
2026-05-20 19:55:54 +10:00
committed by GitHub
parent 0f429b89ab
commit e6fe9916d6
@@ -769,9 +769,17 @@ const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
aria-hidden="true"
/>
) : (
// data-chromatic="ignore" keeps Chromatic snapshots
// stable as wall-clock time advances (e.g. "now" → "5m").
<span data-chromatic="ignore">
// 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.
<span
data-chromatic="ignore"
className="inline-block w-7 text-right"
>
{shortRelativeTime(chat.updated_at)}
</span>
)}