fix(frontend): hover animation on project cards not moving billing badge

[jog1t]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[jog1t]

• refactor(frontend): sleep/schedule/wake actions on actors #5092
• refactor(frontend): bring back the billing gauge #5091
• fix(frontend): remove create actor from context switcher #5090
• fix(frontend): dark mode issues on health check monitor #5088
• fix(frontend): custom actor icons not displaying #5083
• refactor(frontend): unify settings pages #5082
• fix(frontend): re-layout members screen #5081
• fix(frontend): navigation during open popover breaks closing animation #5080
• fix(frontend): hover animation on project cards not moving billing badge #5079 👈 (View in Graphite)
• fix(frontend): missing skeleton view for actor names #5078
• fix(frontend): ensure onboarding checks are only for production namespace, improve caching #5077
• fix(frontend): fix changelog display #5076
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

Code Review: fix(frontend): hover animation on project cards not moving billing badge

PR is already merged. This is a retrospective review.

Overview

A one-line Tailwind CSS fix that ensures the billing badge button on project cards participates in the card's hover/active animation, instead of remaining stationary while the rest of the card moves.

Change Analysis

The diff adds three Tailwind classes to the billing badge <button>:

• transition-all duration-150 — enables smooth CSS transitions for all properties over 150ms
• group-hover:-translate-y-0.5 — translates the badge upward by 2px when the parent card (group) is hovered, matching the card's lift animation
• group-active:translate-y-0 — resets the translation when the card is pressed/active

Assessment

Correctness: The fix is correct. The parent card element has the group class (implied by the use of group-hover:* on children), and the badge was missing these classes, causing it to stay in place during the card hover animation. The added classes replicate the expected behavior.

Code quality: Clean, minimal, idiomatic Tailwind usage. No unnecessary changes.

Duration consistency: Worth verifying the parent card's hover animation also uses duration-150. If the card uses a different duration (e.g. duration-200), the badge will animate out of sync. A quick check of the surrounding card element's classes would confirm alignment.

transition-all scope: Using transition-all is slightly broad since only transform is changing here, but for a small badge element the practical difference is negligible.

Minor Suggestions

• The PR description checklist was left entirely unchecked. Even for small fixes, checking the self-review box helps signal the author verified the change.
• Consider transition-transform instead of transition-all to be more precise, though this is a minor stylistic point.

Verdict

Straightforward, correct fix. No issues.

[jog1t]

Merge activity

• May 21, 8:51 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 21, 8:57 PM UTC: Graphite rebased this pull request as part of a merge.
• May 21, 8:57 PM UTC: @jog1t merged this pull request with Graphite.