refactor: use Button component instead of plain button in CopyButton

[eunjae-lee]

What does this PR do?

Improves the CopyButton component in packages/features/insights/hooks/useInsightsColumns.tsx by replacing the plain <button> element with the <Button> component from @calcom/ui/components/button.

Changes:

• Replaced native <button> with <Button color="minimal" size="sm"> for consistent styling
• Changed title attribute to tooltip prop for better UX
• Used EndIcon prop instead of manually rendering <Icon> component
• Simplified conditional rendering for copied/not-copied states
• Removed unused Icon import

Demo

Before

Screenshot.2025-12-01.at.11.37.10.mp4

After

Screenshot.2025-12-01.at.11.35.09.mp4

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - no documentation changes needed.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Navigate to the Insights page where the CopyButton is used (routing form insights table)
2. Verify the UID and Link columns display copy buttons
3. Click a copy button and verify:
   • The value is copied to clipboard
   • The icon changes from clipboard to check
   • The text changes to "Copied"
   • The tooltip displays the full value on hover

Checklist

• My code follows the style guidelines of this project
• I have checked if my changes generate no new warnings

---

Requested by: @eunjae-lee (eunjae@cal.com)
Link to Devin run: https://app.devin.ai/sessions/c806c43296a14eeea22ff0bfcdc3d5b2

---

Summary by cubic

Refactored CopyButton to use the shared Button component for consistent styling and a cleaner UX in Insights. Aligns with Linear 1764584191 by standardizing the copy action UI.

• Refactors
  • Replaced native button with Button (minimal, sm) and tooltip.
  • Used EndIcon for clipboard/check; removed Icon and conditional rendering; added shrink-0 to Button icons.
  • Preserved copyToClipboard behavior and i18n "copied" text.

^{Written for commit fafb132. Summary will update automatically on new commits.}

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
cal-companion	Error			Dec 1, 2025 10:55am

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
cal	Ignored			Dec 1, 2025 10:55am
cal-eu	Ignored			Dec 1, 2025 10:55am

[eunjae-lee]

without shrink-0, ... the icon shrinks.

[cubic-dev-ai]

No issues found across 2 files

[cubic-dev-ai]

1 issue found across 2 files

Prompt for AI agents (all 1 issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/features/insights/hooks/useInsightsColumns.tsx">

<violation number="1" location="packages/features/insights/hooks/useInsightsColumns.tsx:354">
P2: Without the previous w-full constraint the Button expands to the full label/URL width, so long booking URLs are no longer truncated and the column layout breaks.</violation>
</file>

_{Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR}

[cubic-dev-ai]

P2: Without the previous w-full constraint the Button expands to the full label/URL width, so long booking URLs are no longer truncated and the column layout breaks.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/features/insights/hooks/useInsightsColumns.tsx, line 354:

<comment>Without the previous w-full constraint the Button expands to the full label/URL width, so long booking URLs are no longer truncated and the column layout breaks.</comment>

<file context>
@@ -349,24 +348,16 @@ function CopyButton({ label, value }: { label: string; value: string }) {
+    &lt;Button
+      color=&quot;minimal&quot;
+      size=&quot;sm&quot;
+      className=&quot;overflow-hidden&quot;
+      tooltip={value}
+      EndIcon={isCopied ? &quot;check&quot; : &quot;clipboard&quot;}
</file context>

Suggested change

	className="overflow-hidden"
	className="w-full overflow-hidden"