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