[feat] Add rectangular hover area tracking for queue overlay

[benceruleanlu]

Summary

Adds hover detection over the entire rectangular bounding box of the queue area (actionbar + QueueProgressOverlay combined).

Implementation

Uses useMouse + useElementBounding from VueUse to compute whether the mouse position is within the element's bounds:

const isQueueAreaHovered = computed(
  () =>
    mouseX.value >= left.value &&
    mouseX.value <= right.value &&
    mouseY.value >= top.value &&
    mouseY.value <= bottom.value
)

This approach is needed because QueueProgressOverlay has pointer-events-none on its wrapper, which would create "holes" in hover detection with standard mouseenter/mouseleave events.

Status

⏳ Waiting for design confirmation on whether we need the strict rectangular hover area tracking, or if standard hover events would suffice.

Depends on

• [feat] Improve queue job item UX based on design feedback #6893

🤖 Generated with Claude Code

┆Issue is synchronized with this Notion page by Unito

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/queue-hover-area-tracking

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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

[github-actions]

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 11/24/2025, 09:17:49 PM UTC

📈 Summary

• Total Tests: 496
• Passed: 484 ✅
• Failed: 0
• Flaky: 3 ⚠️
• Skipped: 9 ⏭️

📊 Test Reports by Browser

• ✅ chromium: View Report • ✅ 475 / ❌ 0 / ⚠️ 3 / ⏭️ 9
• ✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
• ✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
• ✅ mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

---

🎉 Click on the links above to view detailed test results for each browser configuration.

[github-actions]

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 11/24/2025, 09:07:30 PM UTC

🔗 Links

• 📊 View Workflow Run
• 🎨 View Storybook

---

🎉 Your Storybook is ready for review!

[benceruleanlu]

Even if design says we need it, we can probably replace this with dom/css gymnastics