fix(ui): prevent action icons from overlapping PR number on hover

[owaismohammed79]

Description

When hovering over a Pull Request entry in the right side task sidebar, the action icons visually overlapped the PR number badge. This PR hides the PR number on hover to cleanly make room for the action icons

Related issues

Fixes #2714 .

Testing

pnpm run format
pnpm run lint
pnpm run typecheck
pnpm run test (UI checks passed cleanly, bypassed unrelated errors on a few tests)

Screenshot/Recording (if applicable)

30.06.2026_23.49.43_REC.mp4

Checklist

• [ x ] I kept this PR small and focused
• [ x ] I ran a self-review before opening this PR
• [ x ] I ran the relevant local checks or explained why not
• I updated docs when behavior or setup changed
• [ x ] I added or updated tests when behavior changed, or explained why not
• [ x ] I only added comments where the logic is not obvious
• [ x ] I used Conventional Commits for commit
  messages and, when possible, the PR title

[greptile-apps]

Greptile Summary

This PR fixes a visual overlap between the PR number badge and the action icons that appear on hover in the task sidebar. The badge is wrapped in a <div> with group-hover:opacity-0 transition-opacity duration-200 so it fades out when the button is hovered, and the matching duration-200 is added to the action icon span so both transitions are synchronized.

• The badge wrapper uses opacity-0 rather than display:none, so the element keeps its space and prevents layout shift during the hover transition.
• The absolute-positioned action icon span already sat at right-0 before this change; the new fade-out on the badge makes the visual layering correct without requiring any layout restructuring.

Confidence Score: 5/5

A minimal, self-contained styling change that only affects hover-state opacity transitions; no logic, data, or state is altered.

The change wraps a purely visual badge in an opacity-fade wrapper and synchronizes the existing action-icon fade-in to the same 200ms duration. There is no state mutation, no data flow change, and no layout shift risk because opacity-0 keeps the element in the document flow. Both transitions target the same group ancestor and fire together on hover, so the timing is coherent. Nothing in the surrounding component logic is touched.

No files require special attention.

Important Files Changed

Filename	Overview
apps/emdash-desktop/src/renderer/features/tasks/diff-view/changes-panel/components/pr-entry/pr-entry.tsx	Wraps PrNumberBadge in an opacity wrapper that fades out on hover, and adds duration-200 to the existing action-icon span transition, so the badge hides cleanly when action icons appear.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant User
    participant Button (group)
    participant PrNumberBadge div
    participant ExternalLink span

    Note over PrNumberBadge div: opacity-100 (visible)
    Note over ExternalLink span: opacity-0 (hidden)

    User->>Button (group): mouseenter
    Button (group)->>PrNumberBadge div: group-hover:opacity-0 (fade out, 200ms)
    Button (group)->>ExternalLink span: group-hover:opacity-100 (fade in, 200ms)

    User->>Button (group): mouseleave
    Button (group)->>PrNumberBadge div: restore opacity-100 (fade in, 200ms)
    Button (group)->>ExternalLink span: restore opacity-0 (fade out, 200ms)

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant User
    participant Button (group)
    participant PrNumberBadge div
    participant ExternalLink span

    Note over PrNumberBadge div: opacity-100 (visible)
    Note over ExternalLink span: opacity-0 (hidden)

    User->>Button (group): mouseenter
    Button (group)->>PrNumberBadge div: group-hover:opacity-0 (fade out, 200ms)
    Button (group)->>ExternalLink span: group-hover:opacity-100 (fade in, 200ms)

    User->>Button (group): mouseleave
    Button (group)->>PrNumberBadge div: restore opacity-100 (fade in, 200ms)
    Button (group)->>ExternalLink span: restore opacity-0 (fade out, 200ms)

Loading

_{Reviews (1): Last reviewed commit: "fix(ui): prevent action icons from overl..." | Re-trigger Greptile}