Skip to content

fix(replays): Fix web vital tooltip rendering in the replay timeline#119070

Merged
DominikB2014 merged 1 commit into
masterfrom
dominikbuszowiecki/replay-862-weird-rendering-issue-in-the-timeline
Jul 7, 2026
Merged

fix(replays): Fix web vital tooltip rendering in the replay timeline#119070
DominikB2014 merged 1 commit into
masterfrom
dominikbuszowiecki/replay-862-weird-rendering-issue-in-the-timeline

Conversation

@DominikB2014

@DominikB2014 DominikB2014 commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Fixes overflow on replays tooltip

Before

(notice all web vitals is cut off when json collapsed, and json looks really narrow when expanded)

image image

After

image image

Ai Summary

Fixes REPLAY-862 — the tooltip for web vital markers on the replay timeline rendered "weird".

Web vital markers show an expandable StructuredEventData JSON block alongside an "All Web Vitals" link. In the default 291px tooltip the JSON column was squeezed so narrow that even a short key like value wrapped to two characters per line (making the tooltip very tall), and the nowrap link could overflow the tooltip edge.

  • Widen the tooltip to 400px only for web vital frames (frames.some(isWebVitalFrame)); all other breadcrumb tooltips keep their existing 291px width.
  • Stack the "All Web Vitals" link below the now full-width JSON block instead of beside it, so the link can never be pushed outside the tooltip (e.g. with long CSS selectors).

Test plan

  • Open a replay containing LCP/CLS web vital breadcrumbs and hover the web vital marker on the timeline bar under the player.
  • Confirm the JSON renders at normal height (keys like value on one line) and the "All Web Vitals" link sits inside the tooltip, below the JSON.
  • Confirm non-web-vital breadcrumb tooltips (clicks, navigations) are unchanged at their original width.

Web vital markers in the replay timeline render an expandable JSON block
plus an "All Web Vitals" link. In the default 291px tooltip the JSON column
was squeezed so narrow that even a short key like "value" wrapped to two
characters per line, and the nowrap link could overflow the tooltip.

Widen the tooltip to 400px only for web vital frames (other breadcrumb
tooltips keep their width), and stack the link below the full-width JSON
block so it can never be pushed outside the tooltip.
@DominikB2014 DominikB2014 requested a review from a team as a code owner July 6, 2026 17:48
@linear-code

linear-code Bot commented Jul 6, 2026

Copy link
Copy Markdown

REPLAY-862

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jul 6, 2026

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🆒

@DominikB2014 DominikB2014 merged commit a776c59 into master Jul 7, 2026
86 checks passed
@DominikB2014 DominikB2014 deleted the dominikbuszowiecki/replay-862-weird-rendering-issue-in-the-timeline branch July 7, 2026 13:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants