From 64ec4cda40d3015e645caa94b6a69b70637ded78 Mon Sep 17 00:00:00 2001
From: dante01yoon <bunggl@naver.com>
Date: Fri, 8 May 2026 11:15:22 +0900
Subject: [PATCH] fix: make credits help icon a tooltip button in cloud user
 popover

Wrap the bare <i class="icon-[lucide--circle-help]"> next to the
credits balance in a <Button variant="muted-textonly" size="icon-sm">
so PrimeVue's v-tooltip fires reliably and the icon gets proper
hover/focus states and keyboard accessibility. Apply the same change to
CurrentUserPopoverLegacy.vue and CurrentUserPopoverWorkspace.vue, which
shared the same broken pattern.

Fixes FE-617
---
 src/components/topbar/CurrentUserPopoverLegacy.vue   | 12 +++++++++---
 .../components/CurrentUserPopoverWorkspace.vue       | 12 +++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/topbar/CurrentUserPopoverLegacy.vue b/src/components/topbar/CurrentUserPopoverLegacy.vue
index 083ba1948c..90f431ae86 100644
--- a/src/components/topbar/CurrentUserPopoverLegacy.vue
+++ b/src/components/topbar/CurrentUserPopoverLegacy.vue
@@ -41,10 +41,16 @@
       <span v-else class="text-base font-semibold text-base-foreground">{{
         formattedBalance
       }}</span>
-      <i
+      <Button
         v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
-        class="mr-auto icon-[lucide--circle-help] cursor-help text-base text-muted-foreground"
-      />
+        variant="muted-textonly"
+        size="icon-sm"
+        class="mr-auto"
+        :aria-label="$t('credits.unified.tooltip')"
+        data-testid="credits-info-button"
+      >
+        <i class="icon-[lucide--circle-help]" />
+      </Button>
       <Button
         v-if="isCloud && isFreeTier"
         variant="gradient"
diff --git a/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue b/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
index 89195d9cb6..27425ba4ac 100644
--- a/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
+++ b/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
@@ -68,10 +68,16 @@
       <span v-else class="text-base font-semibold text-base-foreground">{{
         displayedCredits
       }}</span>
-      <i
+      <Button
         v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
-        class="mr-auto icon-[lucide--circle-help] cursor-help text-base text-muted-foreground"
-      />
+        variant="muted-textonly"
+        size="icon-sm"
+        class="mr-auto"
+        :aria-label="$t('credits.unified.tooltip')"
+        data-testid="credits-info-button"
+      >
+        <i class="icon-[lucide--circle-help]" />
+      </Button>
       <!-- Upgrade to add credits (free tier) -->
       <Button
         v-if="isActiveSubscription && permissions.canTopUp && isFreeTier"