Skip to content

Commit 5cd7e30

Browse files
committed
fix(tabs): strip drag visual effects — preserve tab→terminal seam
The dragged tab's bottom edge sits right above the terminal area's top edge. Adding opacity / box-shadow / cursor changes during drag broke the chrome-tab → terminal background continuity (the dragged tab no longer looked like part of the same surface as what's below it). Removed all stylistic rules from .chrome-tab.dragging. The two remaining rules are mechanical, not cosmetic: - z-index: 5 so siblings' slide-aside translateX doesn't visually clip the dragged tab - transition: none so the tab tracks the cursor 1:1 The dragged tab now looks identical to its non-drag self; only its position changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 36a986e commit 5cd7e30

1 file changed

Lines changed: 13 additions & 8 deletions

File tree

src-ui/src/components/center/CenterPanel.css

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,22 @@
5757
}
5858

5959
/* Active drag state — pointer-down a tab and slide it horizontally.
60-
* Disables the bg/color transition so the tab tracks the cursor 1:1
61-
* (translateX is applied inline via React state). z-index lifts it
62-
* above siblings and the active-tab "flare" pseudo-elements; subtle
63-
* elevation + cursor cue communicate the grab. The reorder commits
64-
* on pointerup; until then this is purely visual. */
60+
* INTENTIONALLY zero visual effect (no opacity, no shadow, no cursor
61+
* change): the dragged tab's bottom edge meets the terminal area's
62+
* top edge, and any elevation / dimming there breaks the chrome-tab
63+
* → terminal seam continuity. The tab just moves; its appearance
64+
* stays identical to its non-drag self.
65+
*
66+
* Two rules below are mechanical, not stylistic:
67+
* z-index — ensures the dragged tab renders above siblings during
68+
* their slide-aside translateX, so it isn't visually
69+
* clipped by them.
70+
* transition: none — the tab tracks the cursor 1:1 (translateX is
71+
* applied inline via React state); a transition here
72+
* would lag behind the cursor. */
6573
.chrome-tab.dragging {
6674
z-index: 5;
67-
cursor: grabbing;
68-
opacity: 0.92;
6975
transition: none;
70-
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
7176
}
7277

7378
/* Chrome 'flare' pseudo-elements bridging the tab to the terminal background */

0 commit comments

Comments
 (0)