fix(ui): native tooltip on truncated copy chips - #3196
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![capy-ai[bot]](https://avatars.githubusercontent.com/in/1915919?s=60&v=4){kind=small}
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8bd21edf30
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| className={cn("", props.className)} | ||
| > | ||
| <span className={cn("truncate", innerClassName)}> | ||
| <span title={text} className={cn("truncate", innerClassName)}> |
There was a problem hiding this comment.
When a caller supplies its own title, this nested title takes precedence while the pointer is over the label. In CustomerPageDetails.tsx, the always-rendered ID button deliberately uses title="This user's id is undefined" when the ID is absent while passing text="PENDING"; after this change, hovering the label shows only “PENDING” and hides the explanatory tooltip. Use the caller-provided title when present rather than unconditionally overriding it with text.
Useful? React with 👍 / 👎.
|
|
||
| return ( | ||
| <Button | ||
| title={text} |
There was a problem hiding this comment.
For icon-only uses, text is the clipboard payload rather than a truncated visible label. In WorkbenchJsonViewer.tsx, this component receives the complete JSON.stringify(data, null, 2) result, so merely hovering the small copy icon now opens a native tooltip containing the entire response, which can be extremely large and obscure the workbench. Limit the full-value title to instances with a truncated text child, or provide a short icon-only title such as “Copy”.
Useful? React with 👍 / 👎.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 2 files
Confidence score: 4/5
- In
packages/ui/src/components/general/copy-button.tsx, the nestedtitle={text}can override a caller-provided tooltip, hiding guidance such as the missing-ID explanation; preserve the caller’s label tooltip when supplied. - In
packages/ui/src/components/general/copy-text-button.tsx, using the full clipboard payload as the icon-only button’s native title can expose enormous JSON tooltips and degrade usability; use a short title such as "Copy" instead.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/ui/src/components/general/copy-button.tsx">
<violation number="1" location="packages/ui/src/components/general/copy-button.tsx:106">
P2: Preserve the caller's tooltip on the label when one is provided. Otherwise, the nested `title={text}` replaces messages such as the missing-ID explanation while hovering the label.</violation>
</file>
<file name="packages/ui/src/components/general/copy-text-button.tsx">
<violation number="1" location="packages/ui/src/components/general/copy-text-button.tsx:32">
P2: Use a short title such as `"Copy"` for this icon-only button instead of exposing the entire clipboard payload. `CopyTextButton` receives complete JSON responses, so `title={text}` can produce an enormous native tooltip over the workbench.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| className={cn("", props.className)} | ||
| > | ||
| <span className={cn("truncate", innerClassName)}> | ||
| <span title={text} className={cn("truncate", innerClassName)}> |
There was a problem hiding this comment.
P2: Preserve the caller's tooltip on the label when one is provided. Otherwise, the nested title={text} replaces messages such as the missing-ID explanation while hovering the label.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/ui/src/components/general/copy-button.tsx, line 106:
<comment>Preserve the caller's tooltip on the label when one is provided. Otherwise, the nested `title={text}` replaces messages such as the missing-ID explanation while hovering the label.</comment>
<file context>
@@ -103,7 +103,7 @@ export const CopyButton = ({
className={cn("", props.className)}
>
- <span className={cn("truncate", innerClassName)}>
+ <span title={text} className={cn("truncate", innerClassName)}>
{children ?? text}
</span>
</file context>
| <span title={text} className={cn("truncate", innerClassName)}> | |
| <span title={props.title ?? text} className={cn("truncate", innerClassName)}> |
|
|
||
| return ( | ||
| <Button | ||
| title={text} |
There was a problem hiding this comment.
P2: Use a short title such as "Copy" for this icon-only button instead of exposing the entire clipboard payload. CopyTextButton receives complete JSON responses, so title={text} can produce an enormous native tooltip over the workbench.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/ui/src/components/general/copy-text-button.tsx, line 32:
<comment>Use a short title such as `"Copy"` for this icon-only button instead of exposing the entire clipboard payload. `CopyTextButton` receives complete JSON responses, so `title={text}` can produce an enormous native tooltip over the workbench.</comment>
<file context>
@@ -29,6 +29,7 @@ export function CopyTextButton({
return (
<Button
+ title={text}
variant={variant as ButtonProps["variant"]}
size="icon"
</file context>
| title={text} | |
| title="Copy" |
1 participant
Problem
ID chips in the customer product sheet (Sub ID, Stripe ID, etc.) truncate long values with an ellipsis, but hovering them showed nothing — the truncating span had no
title, so there was no way to see the full value without copying it.Change
CopyButton/MiniCopyButton(packages/ui/src/components/general/copy-button.tsx): addtitle={text}to the truncating label span so the browser's native tooltip shows the full value on hover.CopyTextButton(copy-text-button.tsx): sametitle={text}on the button for parity.The existing Radix "Copied!" tooltip is controlled (
open={copied}) and unaffected.Summary by cubic
Adds a native browser tooltip to truncated ID chips in the customer product sheet so hovering shows the full value instead of nothing.
Written for commit 8bd21ed. Summary will update on new commits.