Skip to content

Child Workflow Timeline stuttering with scrollbars on#3329

Draft
rossnelson wants to merge 1 commit intomainfrom
dt-3695-timeline-stutter-scrollbar-fix
Draft

Child Workflow Timeline stuttering with scrollbars on#3329
rossnelson wants to merge 1 commit intomainfrom
dt-3695-timeline-stutter-scrollbar-fix

Conversation

@rossnelson
Copy link
Copy Markdown
Collaborator

@rossnelson rossnelson commented Apr 21, 2026

Summary

Implements DT-3695: Child Workflow Timeline stuttering with scrollbars on

Adds [scrollbar-gutter:stable] to the outer <div> in timeline-graph.svelte — the element with bind:clientWidth={canvasWidth} that drives SVG sizing. On OSes that always show scrollbars (Windows, macOS "Always"), the vertical scrollbar was toggling on/off due to height interaction with the 320px max-height, changing clientWidth each toggle and re-triggering SVG re-renders in a feedback loop. Reserving a stable gutter keeps clientWidth constant regardless of scrollbar state, breaking the loop.

No visible change on overlay-scrollbar OSes (default macOS/Linux); the existing 48px SVG gutter absorbs the reserved space.

Test plan

  • macOS with "Show scroll bars: Always": expand a parent workflow's child-workflow group that has a pending activity — timeline should render at stable width with no stutter
  • Default macOS (overlay scrollbars): same workflow — no visible layout change vs. before the fix
  • Inspect #event-history-timeline-graph in devtools — scrollbar-gutter: stable should be computed on it
  • pnpm check and pnpm lint pass with no new errors

…-gutter

DT-3695: On OSes that always show scrollbars, the embedded child
workflow timeline stuttered when expanding a group with a pending
activity. The inner TimelineGraph div (max-height 320px via
viewportHeight) toggled a vertical scrollbar, changing its clientWidth
(bound to canvasWidth, which drives the SVG width). The re-render
could re-toggle the scrollbar, producing a visible width oscillation.

Reserving a stable scrollbar gutter on that container keeps clientWidth
constant regardless of scrollbar visibility, breaking the loop. No-op
visually on OSes with overlay scrollbars (the 48px SVG gutter already
provides right-edge padding). Requires Chrome 94+, Firefox 97+, or
Safari 18.2+; older browsers fall back to current behavior.
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment Apr 21, 2026 4:53pm

Request Review

@temporal-cicd
Copy link
Copy Markdown
Contributor

temporal-cicd Bot commented Apr 21, 2026

Warnings
⚠️

📊 Strict Mode: 3 errors in 1 file (0.3% of 997 total)

src/lib/components/lines-and-dots/svg/timeline-graph.svelte (3)
  • L35:4: Object is possibly 'null' or 'undefined'.
  • L44:24: Parameter 'e' implicitly has an 'any' type.
  • L104:9: Type 'number | null' is not assignable to type 'number'.

Generated by 🚫 dangerJS against 18c1549

@rossnelson rossnelson changed the title [DT-3695] Child Workflow Timeline stuttering with scrollbars on Child Workflow Timeline stuttering with scrollbars on Apr 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant