fix(frontend): stop assistant 'New' pill from shifting on hover

[keval718]

Summary

Hovering the assistant button in the canvas controls bar made the "New" discovery pill visibly shift: it animated scale-90 → scale-100 with transition-all, so the pill text slid outward while growing and read as the whole controls bar wiggling.

Fix

The pill is absolutely positioned, so all perceived movement came from the scale transform — not real layout. This drops the scale animation and fades the pill in place:

• transition-all → transition-opacity
• removed scale-90 / scale-100 from both the onboarding-pinned and hover states

Hover states no longer change size or position of anything in the bar.

Validation

• npx jest src/components/core/canvasControlsComponent — 71/71 pass

Summary by CodeRabbit

• Style
  • Updated the assistant discovery pill animation to use a smoother fade-in and fade-out effect.
  • Removed the scaling effect while preserving existing visibility behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d41b3c5b-d61f-4b79-b914-32e77c8a6c8a

📥 Commits

Reviewing files that changed from the base of the PR and between 01d1c68 and a5e1197.

📒 Files selected for processing (1)

• src/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsx

---

Walkthrough

The assistant discovery pill now animates visibility through opacity only, removing its previous scale transitions while preserving onboarding and hover visibility logic.

Changes

Assistant discovery pill

Layer / File(s)	Summary
Opacity-only pill animation src/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsx	The pill replaces scale-based transition-all styling with transition-opacity while retaining its existing visibility conditions.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Suggested reviewers: viktoravelino, ramgopalsrikar, cristhianzl, ogabrielluiz, olayinkaadelakun

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 1 warning)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	PR only changes CanvasControls.tsx; no test files were added/updated, and existing tests cover presence of the badge, not the opacity-only hover regression.	Add a regression test in CanvasControls.test.tsx (or a new *.test.tsx) that asserts the pill uses opacity-only classes and no scale-90/scale-100 on hover/onboarding.
Test Quality And Coverage	⚠️ Warning	Tests cover rendering and tooltip focus, but not the new pill’s transition/hover behavior or scale-to-opacity change.	Add RTL assertions for assistant-button-new-pill classes/state under onboarding and hover, verifying transition-opacity and no scale-* classes.

✅ Passed checks (7 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main fix: the assistant "New" pill no longer shifts on hover.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Test File Naming And Structure	✅ Passed	No test files were changed in this PR; nearby component tests use descriptive names, tests placement, and setup/teardown with positive/negative cases.
Excessive Mock Usage Warning	✅ Passed	Mocks isolate external stores/hooks/child components; no sign of excessive or misleading mock usage in this PR’s tests.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/assistant-pill-hover-shift

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

⚠️ Test Coverage Advisor — tests appear to be missing

This PR changes source code but does not add or modify any test files.
This is an advisory check: it will not block this PR or any other job —
please add tests if the change is testable.

Frontend (TS/TSX) — no *.test.* / *.spec.* / tests/ change found

src/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsx

Advisory check only — it always passes and is never a required status.

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	45.73% (63206/138199)	69.88% (8608/12318)	43.85% (1425/3249)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
5270	0 💤	0 ❌	0 🔥	18m 2s ⏱️

[Cristhianzl]

lgtm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 59.88%. Comparing base (ccdb7c7) to head (a5e1197).
⚠️ Report is 19 commits behind head on release-1.11.0.

Additional details and impacted files

@@                Coverage Diff                 @@
##           release-1.11.0   #14035      +/-   ##
==================================================
- Coverage           59.99%   59.88%   -0.11%     
==================================================
  Files                2389     2390       +1     
  Lines              230242   230282      +40     
  Branches            34463    34478      +15     
==================================================
- Hits               138125   137897     -228     
- Misses              90501    90769     +268     
  Partials             1616     1616              

Flag	Coverage Δ
frontend	59.28% <100.00%> (-0.17%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...ts/core/canvasControlsComponent/CanvasControls.tsx	92.14% <100.00%> (ø)

... and 30 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.