fix(ui): prevent text clipping in execution overview state history #14969
Open
sanjay78632 wants to merge 1 commit intokestra-io:developfrom
Open
fix(ui): prevent text clipping in execution overview state history #14969sanjay78632 wants to merge 1 commit intokestra-io:developfrom
sanjay78632 wants to merge 1 commit intokestra-io:developfrom
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
✨ Description
Fixes text clipping in the Execution Overview page's State History timeline when the left panel is too narrow.
The root cause was
el-timeline-item's:timestampprop which renders timestamps usingposition: absolute; left: -210px. When the panel is narrower than ~210px, these timestamps are pushed outside the visible area and clipped by parentoverflow: hidden— with no way to scroll to them.Fix: Removed the
:timestampprop and moved both the timestamp and state name into the content slot using a flex layout (.timeline-row). Since they are now in normal document flow, they can never be clipped — and on very narrow panels they wrap gracefully onto separate lines.🔗 Related Issue
Closes #14878.
🎨 Frontend Checklist
npm run build)npm run test:e2e)UIchanges📝 Additional Notes
Only one file changed:
ui/src/components/executions/overview/components/sidebar/Timeline.vue:timestampprop fromel-timeline-item.timeline-rowflex container inside the content slot.el-timeline-item__timestampabsolute positioning stylesscreen-recording-1772868215264.mp4