Improve macOS title bar drag area

src/renderer/components/layout/TabBar.tsx

@@ -243,13 +243,23 @@ 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.
+      <div
-          Capped at 75% so the drag spacer always has room to the right. */}
+        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
+        }
+      >
+        {/* 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. */}
         <div
           ref={(el) => {
             scrollContainerRef.current = el;
@@ -279,6 +289,7 @@ export const TabBar = ({ paneId }: TabBarProps): React.JSX.Element => {
               />
             ))}
           </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