Improve macOS title bar drag area

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. */}
       <div
-        ref={(el) => {
+        className="flex min-w-0 shrink items-center gap-1"
-          scrollContainerRef.current = el;
+        style={
-          setDroppableRef(el);
+          {
-        }}
+            WebkitAppRegion: 'no-drag',
-        className="scrollbar-none flex min-w-0 flex-1 items-center gap-1"
+            flex: '0 1 auto',
-        style={{
+            maxWidth: 'calc(100% - 32px)',
-          outline: isDroppableOver ? '1px dashed var(--color-accent, #6366f1)' : 'none',
+          } as React.CSSProperties
-          outlineOffset: '-1px',
+        }
-          overflowX: 'auto',
-          overflowY: 'hidden',
-        }}
       >
-        <SortableContext items={tabIds} strategy={horizontalListSortingStrategy}>
+        {/* Keep the sortable list inside a no-drag group so tabs remain clickable,
-          {openTabs.map((tab) => (
+            while any leftover space in the pane segment can drag the window. */}
-            <SortableTab
+        <div
-              key={tab.id}
+          ref={(el) => {
-              tab={tab}
+            scrollContainerRef.current = el;
-              paneId={paneId}
+            setDroppableRef(el);
-              isActive={tab.id === activeTabId}
+          }}
-              isSelected={selectedSet.has(tab.id)}
+          className="scrollbar-none flex min-w-0 flex-1 items-center gap-1"
-              onTabClick={handleTabClick}
+          style={{
-              onMouseDown={handleMouseDown}
+            outline: isDroppableOver ? '1px dashed var(--color-accent, #6366f1)' : 'none',
-              onContextMenu={handleContextMenu}
+            outlineOffset: '-1px',
-              onClose={closeTab}
+            overflowX: 'auto',
-              setRef={setTabRef}
+            overflowY: 'hidden',
-            />
+          }}
-          ))}
+        >
-        </SortableContext>
+          <SortableContext items={tabIds} strategy={horizontalListSortingStrategy}>
+            {openTabs.map((tab) => (
+              <SortableTab
+                key={tab.id}
+                tab={tab}
+                paneId={paneId}
+                isActive={tab.id === activeTabId}
+                isSelected={selectedSet.has(tab.id)}
+                onTabClick={handleTabClick}
+                onMouseDown={handleMouseDown}
+                onContextMenu={handleContextMenu}
+                onClose={closeTab}
+                setRef={setTabRef}
+              />
+            ))}
+          </SortableContext>
+        </div>
 
         {/* Refresh button - show only for session tabs */}
         {activeTab?.type === 'session' && (
@@ -298,6 +309,9 @@ export const TabBar = ({ paneId }: TabBarProps): React.JSX.Element => {
         )}
       </div>
 
+      {/* Guaranteed drag target, even when the tab list is dense. */}
+      <div className="min-w-8 flex-1 self-stretch" />
+
       {/* Context menu */}
       {contextMenu && contextMenuTabId && (
         <TabContextMenu