diff --git a/src/renderer/components/layout/TabBar.tsx b/src/renderer/components/layout/TabBar.tsx index c1b99164..9e079e03 100644 --- a/src/renderer/components/layout/TabBar.tsx +++ b/src/renderer/components/layout/TabBar.tsx @@ -243,42 +243,53 @@ export const TabBar = ({ paneId }: TabBarProps): React.JSX.Element => { isMacElectron && isLeftmostPane ? 'var(--macos-traffic-light-padding-left, 72px)' : '8px', - WebkitAppRegion: 'no-drag', + WebkitAppRegion: isMacElectron ? 'drag' : 'no-drag', opacity: isFocused || paneCount === 1 ? 1 : 0.7, } as React.CSSProperties } > - {/* Tab list with horizontal scroll, sortable DnD, and droppable area. - Capped at 75% so the drag spacer always has room to the right. */}
{ - scrollContainerRef.current = el; - setDroppableRef(el); - }} - className="scrollbar-none flex min-w-0 flex-1 items-center gap-1" - style={{ - outline: isDroppableOver ? '1px dashed var(--color-accent, #6366f1)' : 'none', - outlineOffset: '-1px', - overflowX: 'auto', - overflowY: 'hidden', - }} + className="flex min-w-0 shrink items-center gap-1" + style={ + { + WebkitAppRegion: 'no-drag', + flex: '0 1 auto', + maxWidth: 'calc(100% - 32px)', + } as React.CSSProperties + } > - - {openTabs.map((tab) => ( - - ))} - + {/* Keep the sortable list inside a no-drag group so tabs remain clickable, + while any leftover space in the pane segment can drag the window. */} +
{ + scrollContainerRef.current = el; + setDroppableRef(el); + }} + className="scrollbar-none flex min-w-0 flex-1 items-center gap-1" + style={{ + outline: isDroppableOver ? '1px dashed var(--color-accent, #6366f1)' : 'none', + outlineOffset: '-1px', + overflowX: 'auto', + overflowY: 'hidden', + }} + > + + {openTabs.map((tab) => ( + + ))} + +
{/* Refresh button - show only for session tabs */} {activeTab?.type === 'session' && ( @@ -298,6 +309,9 @@ export const TabBar = ({ paneId }: TabBarProps): React.JSX.Element => { )}
+ {/* Guaranteed drag target, even when the tab list is dense. */} +
+ {/* Context menu */} {contextMenu && contextMenuTabId && (