From 1168d4b057447f69b48e7e668382b1ee29c87020 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Macdara=20=C3=93=20Murch=C3=BA?= <m4cd4r4@gmail.com>
Date: Wed, 1 Apr 2026 09:33:42 +0800
Subject: [PATCH 1/2] Fix copy token tooltip clipping and icon flicker

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
---
 lib/lightning_web/live/tokens_live/index.ex   |  8 ------
 .../live/tokens_live/index.html.heex          | 28 +++++++++++--------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/lib/lightning_web/live/tokens_live/index.ex b/lib/lightning_web/live/tokens_live/index.ex
index 4c0a9a4d922..167a37830eb 100644
--- a/lib/lightning_web/live/tokens_live/index.ex
+++ b/lib/lightning_web/live/tokens_live/index.ex
@@ -7,7 +7,6 @@ defmodule LightningWeb.TokensLive.Index do
   alias Lightning.Accounts
   alias Lightning.Policies.Permissions
   alias Lightning.Policies.Users
-  alias Phoenix.LiveView.JS
 
   on_mount {LightningWeb.Hooks, :assign_projects}
 
@@ -59,13 +58,6 @@ defmodule LightningWeb.TokensLive.Index do
      |> put_flash(:info, "Token created successfully")}
   end
 
-  @impl true
-  def handle_event("copy", _, socket) do
-    {:noreply,
-     socket
-     |> put_flash(:info, "Token copied successfully")}
-  end
-
   defp get_api_tokens_for(user) do
     Accounts.list_api_tokens(user)
   end
diff --git a/lib/lightning_web/live/tokens_live/index.html.heex b/lib/lightning_web/live/tokens_live/index.html.heex
index 0d3d20c0ef5..d62ee3941d1 100644
--- a/lib/lightning_web/live/tokens_live/index.html.heex
+++ b/lib/lightning_web/live/tokens_live/index.html.heex
@@ -36,7 +36,7 @@
             Make sure to copy your token now as you will not be able to see it again.
           </div>
         </div>
-        <div class="flex rounded overflow-auto p-2 bg-gray-100 w-auto justify-between">
+        <div class="flex rounded overflow-hidden p-2 bg-gray-100 w-auto justify-between">
           <input
             type="text"
             id="new_token"
@@ -45,17 +45,23 @@
             disabled
           />
 
-          <button
-            id="copy"
-            type="button"
-            phx-hook="Copy"
-            phx-then={JS.push("copy")}
-            data-to="#new_token"
-            class="rounded-full bg-blue-100 p-2 text-indigo-700 shadow-xs hover:opacity-75"
+          <span
+            id="copy-token-tooltip"
+            phx-hook="Tooltip"
+            aria-label="Copy to clipboard"
+            data-hide-on-click="false"
           >
-            <.icon name="hero-clipboard" class="h-5 w-5" />
-            <span class="sr-only">Copy</span>
-          </button>
+            <button
+              id="copy"
+              type="button"
+              phx-hook="Copy"
+              data-to="#new_token"
+              class="rounded-full bg-blue-100 p-2 text-indigo-700 shadow-xs hover:opacity-75"
+            >
+              <.icon name="hero-clipboard" class="h-5 w-5" />
+              <span class="sr-only">Copy to clipboard</span>
+            </button>
+          </span>
         </div>
       </div>
     </div>

From e491ebfbba5e53e2579a988408b8ad19f03dfde1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Macdara=20=C3=93=20Murch=C3=BA?= <m4cd4r4@gmail.com>
Date: Wed, 1 Apr 2026 09:35:12 +0800
Subject: [PATCH 2/2] Add changelog entry for #2463

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fcd6c8109a3..4364f327ce3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,6 +46,9 @@ and this project adheres to
   [#4524](https://github.com/OpenFn/lightning/issues/4524)
 - Copying api tokens doesn't work on unsecure non-localhost contexts
   [PR#4551](https://github.com/OpenFn/lightning/pull/4551)
+- Copy token button on the Personal Access Tokens page now shows a
+  'Copied!' tooltip on click and no longer causes the icon to flicker
+  [#2463](https://github.com/OpenFn/lightning/issues/2463)
 - Fix AI assistant authorization for support users on projects with support
   access enabled [#4571](https://github.com/OpenFn/lightning/issues/4571)