fix(tabs): drop doubled border on leftmost split pane

The TabGroupSplitLayout wrapper paints a full-height `border-l` at the
sidebar seam, and every split pane paints its own `border-l`. On the
leftmost pane those stacked at the same x, reading as a ~2px bar just
below the drag strip where the wrapper's 1px line continues alone above.

Mirror the right-edge handling: skip the pane's `border-l` when it
touches the left edge, leaving the single wrapper border to draw the
seam — same visual weight as the right edge.

Co-authored-by: Orca <help@stably.ai>
This commit is contained in:
brennanb2025
2026-05-01 12:38:37 -07:00
co-authored by Orca
parent e22023f897
commit bf4298a048
2 changed files with 11 additions and 8 deletions
@@ -29,6 +29,7 @@ export default function TabGroupPanel({
isFocused,
hasSplitGroups,
touchesRightEdge,
touchesLeftEdge,
reserveClosedExplorerToggleSpace,
reserveCollapsedSidebarHeaderSpace,
isTabDragActive = false,
@@ -41,6 +42,7 @@ export default function TabGroupPanel({
isFocused: boolean
hasSplitGroups: boolean
touchesRightEdge: boolean
touchesLeftEdge: boolean
reserveClosedExplorerToggleSpace: boolean
reserveCollapsedSidebarHeaderSpace: boolean
isTabDragActive?: boolean
@@ -197,14 +199,14 @@ export default function TabGroupPanel({
// because a lone group has nothing to contrast against.
className={`group/tab-group flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden${
hasSplitGroups
? // Why: drop only the RIGHT border on the rightmost group. The right
// sidebar paints its own `borderLeft` that already extends full
// height, so painting our own border-r in that spot stacks a
// second 1px line next to it — reading as a 2px-thick bar below
// the 8px drag strip (where the sidebar border continues alone
// above). The left edge has no such double-up, so the left
// border is always kept.
` border-l ${touchesRightEdge ? '' : 'border-r'} border-border border-b ${isFocused ? 'border-b-accent' : 'opacity-95'}`
? // Why: drop the outer borders on the edge-touching groups. The
// TabGroupSplitLayout wrapper already paints a full-height
// `border-l` at the sidebar seam, and the right sidebar paints
// its own `borderLeft` at the right seam — painting our own
// border-l/border-r in those spots stacks a second 1px line
// next to it, reading as a ~2px bar below the drag strip
// (where the sibling border continues alone above).
` ${touchesLeftEdge ? '' : 'border-l'} ${touchesRightEdge ? '' : 'border-r'} border-border border-b ${isFocused ? 'border-b-accent' : 'opacity-95'}`
: ''
}`}
onPointerDown={commands.focusGroup}
@@ -126,6 +126,7 @@ function SplitNode({
isFocused={isWorktreeActive && node.groupId === focusedGroupId}
hasSplitGroups={hasSplitGroups}
touchesRightEdge={touchesRightEdge}
touchesLeftEdge={touchesLeftEdge}
reserveClosedExplorerToggleSpace={touchesTopEdge && touchesRightEdge}
reserveCollapsedSidebarHeaderSpace={touchesTopEdge && touchesLeftEdge}
isTabDragActive={isTabDragActive}