mirror of
https://github.com/wavetermdev/waveterm
synced 2026-05-24 09:18:27 +00:00
e2b2498741
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.
```tsx
<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)" }}
/>
)}
```
- **<screenshot>**
-
https://github.com/user-attachments/assets/8c25ef6f-c600-484e-a4fa-6ac83657b484
<!-- START COPILOT CODING AGENT TIPS -->
---
🔒 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.](https://gh.io/cca-advanced-security)
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
|
||
|---|---|---|
| .. | ||
| tab.scss | ||
| tab.tsx | ||
| tabbar-model.ts | ||
| tabbar.scss | ||
| tabbar.tsx | ||
| tabcontent.tsx | ||
| updatebanner.tsx | ||
| vtab.tsx | ||
| vtabbar.tsx | ||
| workspaceeditor.scss | ||
| workspaceeditor.tsx | ||
| workspaceswitcher.scss | ||
| workspaceswitcher.tsx | ||