Fix copy token tooltip clipping and icon flicker#4590
Open
m4cd4r4 wants to merge 2 commits intoOpenFn:mainfrom
Open
Fix copy token tooltip clipping and icon flicker#4590m4cd4r4 wants to merge 2 commits intoOpenFn:mainfrom
m4cd4r4 wants to merge 2 commits intoOpenFn:mainfrom
Conversation
Wrap the copy button in a Tooltip span so the existing
showCopiedTooltip() mechanism can find a parent and show
'Copied!' via tippy.js (rendered outside any overflow context).
Previously:
- showCopiedTooltip() found no parent phx-hook='Tooltip'
and silently no-opped - no visual feedback on the button
- phx-then={JS.push('copy')} triggered a server round-trip
that caused a LiveView diff/repaint, making the icon flicker
Now:
- Tooltip wrapper shows 'Copy to clipboard' on hover and
'Copied!' for 1.5s after click, consistent with other
copy UIs in the codebase (e.g. channel_live/form_component)
- Removed the server-side handle_event('copy') handler and
the phx-then attribute - feedback is handled client-side
- Changed overflow-auto to overflow-hidden on the container
so rounded corners clip properly without adding scrollbars
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.
Description
Fixes #2463 - UI inconsistency when copying the user API token.
Two bugs existed on the Personal Access Tokens page (
/profile/tokens):No visible 'Copied!' feedback - the copy button had no
phx-hook="Tooltip"ancestor, soshowCopiedTooltip()in the Copy hook silently no-opped (this.el.closest('[phx-hook="Tooltip"]')returned null). The only feedback was a flash message at the bottom of the screen.Icon flicker on click -
phx-then={JS.push("copy")}sent a server event on every click, which triggered a LiveView diff/repaint that caused the clipboard icon to flicker.Fix: Wrap the copy button in a
<span phx-hook="Tooltip">witharia-label="Copy to clipboard"anddata-hide-on-click="false". The existingshowCopiedTooltip()mechanism then works correctly - tippy.js shows 'Copied!' for 1.5s and resets. This matches the established pattern inchannel_live/form_component.ex.The server-side
handle_event("copy", ...)handler andphx-thenattribute are removed - feedback is now handled client-side, consistent with other copy UIs in the codebase.Changed
overflow-autotooverflow-hiddenon the token container - this prevents unexpected scrollbars while keeping rounded corner clipping.Validation steps
/profile/tokensand generate a new tokenAI Usage
Pre-submission checklist
/reviewwith Claude Code)