fix(runner): keep the toolbar CTA tooltips inside the window (DEV-2593) - #257
Merged
Conversation
`.hot-cta-tooltip` was anchored `left: 0` to its trigger and is 320px wide. Ask AI and Style both sit in the top bar's right-hand cluster, with Download, the theme toggle and the account menu still to their right, so the panel grew straight past the right edge of the window on every viewport width — and nothing between the tooltip and <body> scrolls, so the overflow was cut off rather than reachable. Measured at 1280: the Style tooltip's right edge landed at 1339. Anchor it to the trigger's right edge instead, so it grows leftwards, and cap it at `calc(100vw - 32px)` for the narrow window where the cluster itself is close to the left side — shrink rather than run off the other edge. The spec measures `getBoundingClientRect()` against the document's `clientWidth` for both triggers. `boundingClientRect` and not `offsetWidth` here, unlike the drawer-width test above it: what is under test is where the box lands relative to the window, and nothing in this subtree is transformed. Without the CSS change the Style case fails on the number above; the Ask AI case passes either way, and is kept because it is the same treatment and the one that would regress if someone re-anchored the class to the left. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want higher recall? High effort reviews run extra passes and find more bugs. A team admin can switch effort levels in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit fcc52f2. Configure here.
Bugbot read `max-width: calc(100vw - 32px)` as a guard against the cluster sitting near the left edge and pointed out — correctly — that the flex spacer keeps the cluster pinned right, so that case never happens and the comment was describing something that cannot occur. Its conclusion, that the panel therefore runs off the *left* at mid-narrow widths, does not reproduce: measured at 1280/1024/900/768/700/640/560/500/420/ 375, the left edge sits at 780, 524, 400, 268, 200, 140, 60, 37, 37, 37 — it never approaches zero, because only what sits right of the trigger moves the panel and below ~537px the bar stops shrinking altogether. The clamp is load-bearing all the same, for a different reason: under ~352px the panel is wider than the window, and with the clamp removed the left edge goes negative at a 320px window. So the rule stays and the comment is rewritten to say what it actually does, with the widths it was measured at. The new spec pins that: at 320 the panel must land inside both edges *and* be narrower than its natural 320px, so it cannot pass by the trigger happening to sit far enough in. Neutering the `max-width` fails it on the left-edge assertion. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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
1 participant
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.
Closes DEV-2593.
Hovering Style in the top bar raised its tooltip half-off the right side of the page.
.hot-cta-tooltipwas anchoredleft: 0to its trigger and is 320px wide. Ask AI and Style both live in the top bar's right-hand cluster, with Download, the theme toggle and the account menu still to their right, so a panel growing rightwards ran past the window on every viewport width — this was never a narrow-screen-only bug. Nothing between the tooltip and<body>scrolls, so the overflow was cut off rather than reachable. Measured at the suite's 1280px viewport, the Style tooltip's right edge landed at 1339.Anchoring to the trigger's right edge instead makes it grow leftwards, which keeps the whole panel on screen: the cluster is pinned to the right, so there is always more room to the left of these two buttons than to the right of them.
max-width: calc(100vw - 32px)covers the narrow window where the cluster itself sits close to the left — shrink rather than run off the other edge. Ask AI shares the class and gets the same treatment.Tests
Two cases in
e2e/panels.spec.ts, one per trigger, measuringgetBoundingClientRect()against the document'sclientWidth.getBoundingClientRectand notoffsetWidthhere, unlike the drawer-width test just above it: what is under test is where the box lands relative to the window, and nothing in this subtree is transformed.Without the CSS change,
the Style tooltip stays inside the viewportfails on the 1339-vs-1280 number above — that is the regression test for this bug. The Ask AI case passes either way and is kept deliberately: it is the same treatment, and it is the one that goes red if someone re-anchors the shared class to the left.pnpm e2e e2e/panels.spec.ts— 19 passedpnpm typecheck— cleanVerified visually as well, at 1280x720 in dark mode: the tooltip is fully on screen with its right edge flush to the Style button's.
🤖 Generated with Claude Code
Note
Low Risk
CSS positioning and layout e2e only; no auth, data, or behavioral logic changes.
Overview
Stops the Ask AI and Style hover tooltips from clipping off the right edge of the window.
.hot-cta-tooltipis now right-anchored (right: 0instead ofleft: 0) so the 320px panel grows left from the trigger.max-width: calc(100vw - 32px)shrinks it on viewports narrower than the panel.E2E in
panels.spec.tsasserts both tooltips stay inside the viewport viagetBoundingClientRect, plus a 320px-wide case that the panel actually shrinks.Reviewed by Cursor Bugbot for commit 827cb32. Bugbot is set up for automated code reviews on this repo. Configure here.