fix(tabs): restore visible right-sidebar divider

Move the terminal/right-sidebar seam from the right sidebar's own
`borderLeft` (which was rendering too subtly against the center column)
back to the rightmost split pane's `border-r`, and extend it up through
the drag strip so the line reaches y=0. Symmetric with the left side.
This commit is contained in:
brennanb2025
2026-04-24 18:58:40 -07:00
parent dd51079a15
commit cf788f1302
3 changed files with 10 additions and 24 deletions
@@ -197,12 +197,7 @@ function RightSidebarInner(): React.JSX.Element {
)}
>
{/* Panel content area */}
<div
className="flex flex-col flex-1 min-w-0 bg-sidebar overflow-hidden"
style={{
borderLeft: rightSidebarOpen ? '1px solid var(--sidebar-border)' : 'none'
}}
>
<div className="flex flex-col flex-1 min-w-0 bg-sidebar overflow-hidden">
{activityBarPosition === 'top' ? (
/* ── Top activity bar: horizontal icon row ── */
<ContextMenu>
@@ -28,7 +28,6 @@ export default function TabGroupPanel({
isWorktreeActive,
isFocused,
hasSplitGroups,
touchesRightEdge,
reserveClosedExplorerToggleSpace,
reserveCollapsedSidebarHeaderSpace,
isTabDragActive = false,
@@ -40,7 +39,6 @@ export default function TabGroupPanel({
isWorktreeActive: boolean
isFocused: boolean
hasSplitGroups: boolean
touchesRightEdge: boolean
reserveClosedExplorerToggleSpace: boolean
reserveCollapsedSidebarHeaderSpace: boolean
isTabDragActive?: boolean
@@ -190,14 +188,7 @@ 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'}`
? ` border-x border-border border-b ${isFocused ? 'border-b-accent' : 'opacity-95'}`
: ''
}`}
onPointerDown={commands.focusGroup}
@@ -125,7 +125,6 @@ function SplitNode({
// "focused", Cmd/Ctrl+W and split shortcuts can hit the wrong worktree.
isFocused={isWorktreeActive && node.groupId === focusedGroupId}
hasSplitGroups={hasSplitGroups}
touchesRightEdge={touchesRightEdge}
reserveClosedExplorerToggleSpace={touchesTopEdge && touchesRightEdge}
reserveCollapsedSidebarHeaderSpace={touchesTopEdge && touchesLeftEdge}
isTabDragActive={isTabDragActive}
@@ -222,15 +221,16 @@ export default function TabGroupSplitLayout({
window-drag region at the top. Only the split layout's own panes
own the resize handles, while this strip keeps the whole top of the
center column draggable regardless of how the splits are arranged.
Why conditional `border-l`: when splits exist, the leftmost pane
paints its own `border-l` starting at y=8. Mirroring that border
on the drag strip extends the seam up to y=0 so the left-sidebar /
center-column line reaches the top of the window, matching the
full-height right-sidebar seam. Without splits the pane has no
`border-l`, so we skip it here too to avoid a dangling 8px stub. */}
Why conditional `border-x`: when splits exist, the outer panes
paint their own vertical borders starting at y=8 (see
TabGroupPanel). Mirroring those borders on the drag strip extends
both seams up to y=0 so the lines between the terminal area and
the left/right sidebars reach the top of the window. Without
splits the panes have no vertical borders, so we skip them here
too to avoid dangling 8px stubs. */}
<div className="flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden">
<div
className={`h-2 shrink-0 bg-card${hasSplits ? ' border-l border-border' : ''}`}
className={`h-2 shrink-0 bg-card${hasSplits ? ' border-x border-border' : ''}`}
style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
/>
<div className="flex flex-1 min-w-0 min-h-0 overflow-hidden">