From 463a75fdb7f76558bea7137400f3eed90ccc6543 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Fri, 22 May 2026 21:35:30 -0500
Subject: [PATCH] fix(metric-card): update action button rendering and styling
 for better UX

---
 .../git/ForgejoIssueMetricCards.tsx           | 42 +++++++++----------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/git/ForgejoIssueMetricCards.tsx b/frontend/src/components/git/ForgejoIssueMetricCards.tsx
index dfb495e..85705f3 100644
--- a/frontend/src/components/git/ForgejoIssueMetricCards.tsx
+++ b/frontend/src/components/git/ForgejoIssueMetricCards.tsx
@@ -264,27 +264,6 @@ function MetricCardLink({ card }: { card: MetricCard }) {
           </p>
         </div>
         <div className="flex shrink-0 items-center gap-1.5 pointer-events-auto">
-          {card.action ? (
-            <button
-              type="button"
-              onClick={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                card.action?.onClick();
-              }}
-              disabled={card.action.isLoading}
-              className={cn(
-                "rounded-lg border p-2 transition hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] disabled:cursor-not-allowed disabled:opacity-70",
-                toneIconClasses[card.tone],
-              )}
-              title={card.action.label}
-              aria-label={card.action.label}
-            >
-              <RefreshCw
-                className={cn("h-4 w-4", card.action.isLoading && "animate-spin")}
-              />
-            </button>
-          ) : null}
           <div
             className={cn(
               "rounded-lg border p-2 transition-transform duration-200 group-hover:scale-110",
@@ -297,7 +276,26 @@ function MetricCardLink({ card }: { card: MetricCard }) {
       </div>
       <div className="relative z-10 mt-4 flex items-center justify-between gap-3 pointer-events-none">
         <p className="min-w-0 text-sm text-muted">{card.caption}</p>
-        <ArrowUpRight className="h-4 w-4 shrink-0 text-muted transition group-hover:text-[color:var(--accent)]" />
+        {card.action ? (
+          <button
+            type="button"
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              card.action?.onClick();
+            }}
+            disabled={card.action.isLoading}
+            className="pointer-events-auto -m-1 rounded-md p-1 text-muted transition hover:text-[color:var(--accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] disabled:cursor-not-allowed disabled:opacity-70"
+            title={card.action.label}
+            aria-label={card.action.label}
+          >
+            <RefreshCw
+              className={cn("h-4 w-4 shrink-0", card.action.isLoading && "animate-spin")}
+            />
+          </button>
+        ) : (
+          <ArrowUpRight className="h-4 w-4 shrink-0 text-muted transition group-hover:text-[color:var(--accent)]" />
+        )}
       </div>
     </div>
   );