Skip to content

Anchor trace viewer shortcut helper to the timeline's left edge#2837

Merged
mitul-s merged 3 commits into
mainfrom
ms/trace-helper-timeline-left
Jul 9, 2026
Merged

Anchor trace viewer shortcut helper to the timeline's left edge#2837
mitul-s merged 3 commits into
mainfrom
ms/trace-helper-timeline-left

Conversation

@mitul-s

@mitul-s mitul-s commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

What

Moves the trace viewer keyboard-shortcut helper (Use J / K to move between spans / Hold Option to see delta between spans) from the center of the pane to the left edge of the timeline — aligned with where the span bars start, not the event list.

How

  • SplitPane now reports its rendered start-pane width via a new optional onStartWidthChange callback.
  • trace-viewer publishes the timeline's content-left edge (startPx + gutter + timeline padding) as a --trace-timeline-left CSS variable on pane-root, written imperatively so dragging the divider doesn't re-render the timeline. It's seeded inline for correct first paint and tracks the divider live.
  • The helper anchors to left: var(--trace-timeline-left) (dropping the old left-1/2 -translate-x-1/2 centering).
  • Visibility now uses a container query (@min-[640px] against pane-root, marked @container) instead of the viewport md: breakpoint, so it hides based on the trace viewer's own width — relevant since the viewer can live inside a split/panel.

Notes

  • pane-root was already relative (the helper's containing block), so @container only adds inline-size containment; its width is parent-driven (w-full), so no layout change.
  • Pure UI positioning change to @workflow/web-shared.

🤖 Generated with Claude Code

@mitul-s mitul-s requested review from a team and ijjk as code owners July 8, 2026 22:22
@vercel

vercel Bot commented Jul 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

Project Deployment Actions Updated (UTC)
example-nextjs-workflow-turbopack Ready Ready Preview, Comment Jul 9, 2026 4:27pm
example-nextjs-workflow-webpack Ready Ready Preview, Comment Jul 9, 2026 4:27pm
example-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workbench-astro-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workbench-express-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workbench-fastify-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workbench-hono-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workbench-nitro-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workbench-nuxt-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workbench-sveltekit-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workbench-tanstack-start-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workbench-vite-workflow Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workflow-docs Ready Ready Preview, Comment, Open in v0 Jul 9, 2026 4:27pm
workflow-swc-playground Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workflow-tarballs Ready Ready Preview, Comment Jul 9, 2026 4:27pm
workflow-web Ready Ready Preview, Comment Jul 9, 2026 4:27pm

@changeset-bot

changeset-bot Bot commented Jul 8, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: dc71869

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@workflow/web-shared Patch
@workflow/web Patch
@workflow/cli Patch
@workflow/nitro Patch
workflow Patch
@workflow/world-testing Patch
@workflow/nuxt Patch
@workflow/core Patch
@workflow/builders Patch
@workflow/next Patch
@workflow/vitest Patch
@workflow/astro Patch
@workflow/nest Patch
@workflow/rollup Patch
@workflow/sveltekit Patch
@workflow/vite Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@VaguelySerious

VaguelySerious commented Jul 8, 2026

Copy link
Copy Markdown
Member

Can't test well on PR previews sadly since runs aren't loading. @karthikscale3

@mitul-s mitul-s marked this pull request as draft July 8, 2026 22:27
@mitul-s @claude
Anchor trace viewer shortcut helper to the timeline's left edge
1384771 
Render the shortcut helper inside the timeline column instead of as a
pane-root overlay, so it aligns to the timeline's left edge (tracking
the divider for free) and sticks to the bottom of the viewport while
the pane scrolls. Gate visibility on a container-query width
(`@container` on the timeline column + `@min-[420px]`) rather than the
viewport `md` breakpoint, so it hides based on the timeline's own width.

No SplitPane API change required.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@mitul-s mitul-s force-pushed the ms/trace-helper-timeline-left branch from e8a65da to 1384771 Compare July 9, 2026 16:03
@mitul-s mitul-s marked this pull request as ready for review July 9, 2026 16:19
@mitul-s mitul-s enabled auto-merge (squash) July 9, 2026 16:19
@mitul-s mitul-s merged commit 392d347 into main Jul 9, 2026
52 of 53 checks passed
@mitul-s mitul-s deleted the ms/trace-helper-timeline-left branch July 9, 2026 16:25
@github-actions github-actions Bot mentioned this pull request Jul 9, 2026
Merged
@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

No backport to stable for 392d347 (AI decision).

This commit only touches files under packages/web-shared/src/components/new-trace-viewer/, which does not exist on stable (verified via git ls-tree origin/stable; stable only has the older trace-viewer directory). The change builds on a main-only trace viewer rewrite, so it cannot be cleanly backported.

To override, re-run the Backport to stable workflow manually via workflow_dispatch and paste this commit SHA into the ref input:

392d347e5d7d5a6388b7db5c17c48c1e91d2e7d9

This was referenced Jul 9, 2026
Open
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@VaguelySerious VaguelySerious VaguelySerious approved these changes
@ijjk ijjk Awaiting requested review from ijjk ijjk is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mitul-s @VaguelySerious