Stabilize vertical-tab drag visuals: overlay drop marker + post-drop hover reset

[Copilot]

Dragging in the vertical tab bar had two UX artifacts: the drop marker reserved layout space (leaving a visible accent gap above selected tabs), and hover styling could remain on the old row after drop until the mouse moved. This updates drag visuals to be overlay-based and forces hover recalculation at drag end.

• Drop marker moved out of flow (no selected-tab accent gap)

  • Replaced per-row in-flow divider placeholders with a single absolutely positioned drop line in the scroll container.
  • Drop line now aligns to actual tab boundaries (offsetTop / offsetHeight) so it covers the divider location directly.

• Drop target rendering simplified

  • Container is relative; marker is conditionally rendered only while reordering.
  • dropLineTop is tracked during drag events and used to position the marker without affecting layout.

• Stale hover state cleared after drop

  • Added a minimal drag-lifecycle reset mechanism (hoverResetVersion) and used it in VTab keys.
  • On drag end/drop, rows remount once, clearing browser-retained :hover on the old index immediately.

<VTab key={`${tab.id}:${hoverResetVersion}`} ... />

{dragTabId != null && dropIndex != null && dropLineTop != null && (
    <div
        className="pointer-events-none absolute left-0 right-0 border-t-2 border-accent/80"
        style={{ top: dropLineTop, transform: "translateY(-1px)" }}
    />
)}

• • https://github.com/user-attachments/assets/8c25ef6f-c600-484e-a4fa-6ac83657b484

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[cloudflare-workers-and-pages]

Deploying waveterm with    Cloudflare Pages

Latest commit:	48919f6
Status:	✅  Deploy successful!
Preview URL:	https://bd31d368.waveterm.pages.dev
Branch Preview URL:	https://copilot-create-vertical-tab.waveterm.pages.dev

View logs