fix(ui): ClipboardText tooltip properly positioned
#11946
Merged
Conversation
This file contains 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
- it seems that with the [new version of `tippy`](argoproj/argo-ui@d726f6c), the `overflow` property made it show up directly above the text (in the z direction) - this meant that you could not click on the clipboard to copy because it would cover the icon 😕 - the [original commit](argoproj@6c244f3) that added `overflow` here was for horizontal scrolling for multi-line args in code blocks (`<pre>` elements) - so I moved the `overflow` into the `pre` element's `class` and made it specific for the `x` direction Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
terrytangyuan
pushed a commit
that referenced
this pull request
Oct 19, 2023
dpadhiar
pushed a commit
to dpadhiar/argo-workflows
that referenced
this pull request
May 9, 2024
Signed-off-by: Dillen Padhiar <dillen_padhiar@intuit.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Motivation
tippy(which was pulled in as part of fix: upgradeargo-uicomponents to latest #11585) theoverflowproperty made it show up directly above the text (in the z direction)This was found by a user and noted on Slack. I then reproduced this myself, see below screenshot with incorrect positioning:
Modifications
overflowhere was for horizontal scrolling for multi-line args in code blocks (<pre>elements)overflowinto thepreelement'sclassmore specifically and made it specific for thexdirectionVerification
Tested locally with a few different variations, see screenshots below.
Single-line clipboard tooltip positioned correctly:
Multi-line clipboard tooltip positioned correctly:
Horizontal overflow on code blocks still works:
Horizontal overflow on multi-line code blocks still works:
