fix(desktop): stabilize workspace list item hover layout

[ascrazy]

Description

Stabilizes workspace row height in the desktop sidebar to prevent hover-time layout shifts.
The diff stats badge now keeps a fixed height and swaps between stats/close affordance using opacity instead of display toggling, which avoids text and neighboring row movement.

Changed file:

• /Users/alexs/Dev/superset/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceDiffStats.tsx

Related Issues

N/A

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

• cd apps/desktop && SUPERSET_WORKSPACE_NAME=dev SKIP_ENV_VALIDATION=1 bun run dev
• Hover workspace items with diff stats in sidebar
• Confirm row label no longer shifts vertically and neighboring items do not move

Screenshots (if applicable)

Before	After

Additional Notes

This is a focused UI stability fix with no intended behavior changes outside hover layout consistency.

Summary by CodeRabbit

Release Notes

• Style
  • Improved workspace diff statistics display with refined layout and spacing
  • Enhanced close button interaction—now transitions smoothly with opacity-based hover visibility
  • Refined hover behavior for better visual feedback and accessibility

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

A single React component file is restructured to improve its layout and hover interaction behavior. CSS classes are reorganized for better sizing and positioning, and the close button's visibility model transitions from hidden/shown to opacity-based, with pointer-events management for interaction control.

Changes

Cohort / File(s)	Summary
WorkspaceDiffStats UI Refactor apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceDiffStats.tsx	Restructured wrapper div classes for layout and height constraints; converted inner content container from group-hover:hidden to group-hover:opacity-0 with transition effects; repositioned close button to use absolute positioning with opacity-based visibility and pointer-events control on hover.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat(desktop): show ahead/behind status on local workspace #1496: Modifies the same WorkspaceDiffStats.tsx component's hover and close-button behavior.
• feature (desktop): sidebar style and close functionality #618: Updates hover/close UI interaction patterns for workspace list items in the same sidebar component area.

Poem

🐰 Hovers now drift soft and slow,
Buttons fade with gentle glow,
No more hiding, just fade away,
Opacity transitions save the day! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: stabilizing workspace list item hover layout to prevent layout shifts.
Description check	✅ Passed	The description follows the template with all required sections completed: clear description of the change, related issues (N/A), type of change marked, testing steps provided, before/after screenshots included, and additional notes.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}