Skip to content

fix(ui): prevent text clipping in execution overview state history #14969

Open
sanjay78632 wants to merge 1 commit intokestra-io:developfrom
sanjay78632:fix/execution-overview-timeline-text-clipping
Open

fix(ui): prevent text clipping in execution overview state history #14969
sanjay78632 wants to merge 1 commit intokestra-io:developfrom
sanjay78632:fix/execution-overview-timeline-text-clipping

Conversation

@sanjay78632
Copy link
Contributor

✨ 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 :timestamp prop which renders timestamps using position: absolute; left: -210px. When the panel is narrower than ~210px, these timestamps are pushed outside the visible area and clipped by parent overflow: hidden — with no way to scroll to them.

Fix: Removed the :timestamp prop 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

  • Code builds without errors (npm run build)
  • All existing E2E tests pass (npm run test:e2e)
  • Screenshots or video recordings attached showing the UI changes

📝 Additional Notes

Only one file changed: ui/src/components/executions/overview/components/sidebar/Timeline.vue

  • Removed :timestamp prop from el-timeline-item
  • Added .timeline-row flex container inside the content slot
  • Removed now-unused .el-timeline-item__timestamp absolute positioning styles
screen-recording-1772868215264.mp4

@github-project-automation github-project-automation bot moved this to To review in Pull Requests Mar 7, 2026
@MilosPaunovic MilosPaunovic self-requested a review March 7, 2026 08:37
@MilosPaunovic MilosPaunovic added area/frontend Needs frontend code changes kind/external Pull requests raised by community contributors labels Mar 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/frontend Needs frontend code changes kind/external Pull requests raised by community contributors

Projects

Status: To review

Development

Successfully merging this pull request may close these issues.

Execution Overview page clips text in the left column when it's too narrow

2 participants