mirror of
https://github.com/coder/coder.git
synced 2026-09-22 05:05:20 +08:00
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:
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user