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
This commit is contained in:
dante01yoon
2026-05-08 11:15:22 +09:00
parent e7c83abd0a
commit 64ec4cda40
2 changed files with 18 additions and 6 deletions

View File

@@ -41,10 +41,16 @@
<span v-else class="text-base font-semibold text-base-foreground">{{ <span v-else class="text-base font-semibold text-base-foreground">{{
formattedBalance formattedBalance
}}</span> }}</span>
<i <Button
v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }" 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 <Button
v-if="isCloud && isFreeTier" v-if="isCloud && isFreeTier"
variant="gradient" variant="gradient"

View File

@@ -68,10 +68,16 @@
<span v-else class="text-base font-semibold text-base-foreground">{{ <span v-else class="text-base font-semibold text-base-foreground">{{
displayedCredits displayedCredits
}}</span> }}</span>
<i <Button
v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }" 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) --> <!-- Upgrade to add credits (free tier) -->
<Button <Button
v-if="isActiveSubscription && permissions.canTopUp && isFreeTier" v-if="isActiveSubscription && permissions.canTopUp && isFreeTier"