fix(superuser): improve banner ux#115168
Conversation
Address visual and behavioral issues with the superuser marquee banner: - Marquee text now adapts to viewport width using ResizeObserver instead of hardcoded 8 repetitions, removing the white gap on wide screens. - Tooltip placement changed to bottom-start with containerDisplayMode block so the popup renders below the banner with a correct arrow direction and the strip fills the full width. - Added cursor: help on the strip and 'hover to exit' hint in the marquee copy to signal the hover-for-info affordance. - Pinned the strip to the top of its frame via align-items: flex-start so the tooltip anchors at the strip rather than the viewport bottom. Refs DE-1231
github-actions
Bot
added
the
Scope: Frontend
📊 Type Coverage Diff✅ No new type safety issues introduced. Coverage: 93.47% |
Change 'hover to exit' to 'hover for exit option' since hovering reveals a tooltip containing an Exit button rather than exiting directly. Refs DE-1231
natemoo-re
left a comment
natemoo-re
left a comment
There was a problem hiding this comment.
Looks great, thanks for tackling this!
Would be nice to refactor to useResizeObserver, but up to you.
| const observer = new ResizeObserver(update); | ||
| observer.observe(strip); |
There was a problem hiding this comment.
Let's refactor to use the lib?
import {useResizeObserver} from '@react-aria/utils';There was a problem hiding this comment.
oh yes sure! thanks for the reminder 🙏
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![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 and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit c95b106. Configure here.
| 'https://www.notion.so/sentry/Sentry-Rules-for-Handling-Customer-Data-9612532c37e14eeb943a6a584abbac99'; | ||
|
|
||
| const SUPERUSER_MESSAGE = 'You are in superuser mode'; | ||
| const SUPERUSER_MESSAGE = 'You are in superuser mode / Hover for more information'; |
There was a problem hiding this comment.
Hover instruction leaks into non-marquee alert context
Medium Severity
The updated SUPERUSER_MESSAGE ("…Hover for more information") is shared across two contexts. On line 110, when hasPageFrame is false, this message is injected into the AlertStore alert — which already displays WARNING_MESSAGE inline right next to it. In that path there's no hoverable marquee strip, so telling users to "hover for more information" is misleading — the information is already visible in the alert itself. The old message ("You are in superuser mode") worked correctly in both contexts.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit c95b106. Configure here.
priscilawebdev
force-pushed
the
priscila/fix/de-1231-superuser-banner-issues
branch
from
3a50b96 to
11b9b8f
Compare
| setMarqueeCount(currentCount => { | ||
| const repWidth = text.offsetWidth / currentCount; | ||
| return repWidth ? Math.ceil(stripWidth / repWidth) + 2 : currentCount; | ||
| }); |
There was a problem hiding this comment.
Bug: Reading text.offsetWidth inside the setMarqueeCount functional updater can cause a race condition during rapid resizes, as the DOM may not reflect the pending state.
Severity: LOW
Suggested Fix
Capture the text.offsetWidth value before calling setMarqueeCount. Pass this measurement into the state updater or use it to calculate the new count outside the updater. This ensures that the DOM measurement corresponds to the state that was rendered when the measurement was taken, avoiding reliance on currentCount inside the updater for this calculation.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location: static/gsApp/components/superuser/superuserWarning.tsx#L93-L96
Potential issue: The `setMarqueeCount` functional updater reads `text.offsetWidth`
directly from the DOM. During rapid viewport resizing, multiple `ResizeObserver`
callbacks can queue state updates before React commits any DOM changes. This creates a
race condition where the updater's `currentCount` argument reflects a pending state, but
`text.offsetWidth` reflects the older, committed DOM state. As a result, the calculation
`repWidth = text.offsetWidth / currentCount` is incorrect, leading to a miscalculation
of the required repetitions and causing visible gaps or unnecessary DOM nodes in the
marquee.
- The strip now spans the full viewport width. - Updated the marquee copy from "You are in superuser mode" to "You are in superuser mode / Hover to exit or learn more" - Added cursor: help to help with discoverability of the exit option - The tooltip's arrow now points up at the strip instead of down, matching the popup's new position below the banner. **Before** https://github.com/user-attachments/assets/f65f44ee-4563-4cf9-affb-3355b977963a **After** https://github.com/user-attachments/assets/16d746a9-d7e0-43bf-9dd9-077da3cf03b6 closes DE-1231 --------- Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
2 participants
are in superuser mode · hover for exit option" so users can discover
how to exit.
matching the popup's new position below the banner.
Before
Screen.Recording.2026-05-08.at.13.50.01.mov
After
Screen.Recording.2026-05-08.at.13.47.02.mov
closes DE-1231