sam/eng-1833 - Fix timestamp layout shifts in message stream #520
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Apply fixed-width containers (160px) to timestamp elements to prevent visual jumps when relative timestamps update from shorter to longer strings. Also shortened timestamp text to fit better: - 'less than a minute ago' → '<1 minute ago' - 'about X hours ago' → '~X hours ago' The fixed width eliminates all layout shifts while maintaining clean right-aligned timestamps across all messages.
Contributor
There was a problem hiding this comment.
Important
Looks good to me! 👍
Reviewed everything up to d27f71a in 53 seconds. Click for details.
- Reviewed
78lines of code in3files - Skipped
0files when reviewing. - Skipped posting
3draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. humanlayer-wui/src/components/internal/SessionDetail/views/ConversationContent.tsx:294
- Draft comment:
Fixed right-side container by setting a fixed width (w-[160px]) and explicit text alignment (justify-end, text-right block) to prevent timestamp layout shifts. Verify that the fixed width works well on various screen sizes. - Reason this comment was not posted:
Comment did not seem useful. Confidence is useful =0%<= threshold50%The comment is asking the PR author to verify that the fixed width works well on various screen sizes. This falls under the category of asking the author to ensure the behavior is intended or to double-check things, which is against the rules.
2. humanlayer-wui/src/components/internal/SessionDetail/views/TaskGroup.tsx:267
- Draft comment:
Applied a fixed width and right alignment (w-[160px] text-right, plus 'text-right block' on the timestamp) in TaskGroup to prevent layout shifts. Ensure consistency across components. - Reason this comment was not posted:
Comment did not seem useful. Confidence is useful =0%<= threshold50%The comment is purely informative, explaining what changes were made and why. It doesn't provide a suggestion, ask for confirmation, or point out a potential issue. It violates the rule against making purely informative comments.
3. humanlayer-wui/src/utils/formatting.ts:27
- Draft comment:
Improved relative timestamp formatting by replacing verbose strings with concise versions (e.g., '<1 minute ago' and '~X hours ago'). Confirm that these replacements align with localization needs if applicable. - Reason this comment was not posted:
Comment did not seem useful. Confidence is useful =0%<= threshold50%The comment is asking the PR author to confirm that the replacements align with localization needs. This falls under the rule of not asking the author to confirm their intention or ensure behavior is intended. The comment does not provide a specific code suggestion or ask for a specific test to be written.
Workflow ID: wflow_9e2W2U0oZYa9jgSv
You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.
dexhorthy
approved these changes
Sep 2, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What problem(s) was I solving?
Fixed visual layout shifts in the message stream that occurred when relative timestamps dynamically updated (e.g., from "just now" to "1 minute ago"). These layout shifts were distracting to users, causing text to jump horizontally while they were typing or reading the conversation history.
Related issues:
What user-facing changes did I ship?
Visual Stability
Shortened Timestamp Format
How I implemented it
Fixed-Width Containers
Applied 160px fixed-width containers to timestamp elements in:
ConversationContent.tsx: Both the main message view and sub-task pathsTaskGroup.tsx: Task group timestamp displaysshrink-0(flexible) tow-[160px](fixed) widthjustify-endandtext-rightfor proper right-alignmentTimestamp Text Formatting
Modified
formatTimestamp()function informatting.ts:date-fnsoutput to shorten common stringsCSS Classes Applied
w-[160px] justify-end(replacesshrink-0)text-right blockfor consistent alignmentHow to verify it
make check testpassesManual Testing
Description for the changelog
Fixed timestamp layout shifts in conversation view by applying fixed-width containers to prevent visual jumps when relative timestamps update. Also shortened timestamp formats for better space efficiency ("less than a minute ago" → "<1 minute ago", "about X hours ago" → "~X hours ago").