From 169d3ea4d8acb145734a0037cd8e2ab7a7194914 Mon Sep 17 00:00:00 2001
From: Jokin <jokingam@tuta.io>
Date: Sat, 11 Jul 2026 19:13:18 +0200
Subject: [PATCH] Tab strip scrolls horizontally on overflow

Tabs live in their own min-w-0 overflow-x-auto container (scrollbar hidden,
trackpad scrolls); the new-tab button and the options gear sit outside it and
stay pinned. The active tab scrolls into view when it changes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ui/src/app/tab-bar/tab-bar.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/tab-bar/tab-bar.ts b/ui/src/app/tab-bar/tab-bar.ts
index bb1384f..6e4d979 100644
--- a/ui/src/app/tab-bar/tab-bar.ts
+++ b/ui/src/app/tab-bar/tab-bar.ts
@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, ElementRef, effect, inject, signal, viewChild } from '@angular/core';
 import { NgIcon } from '@ng-icons/core';
 import { PanelsService } from '../panels.service';
 import { IS_MAC_CHROME } from '../platform';
@@ -26,9 +26,14 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
       [class.pl-1.5]="!isMacChrome"
       [class.pt-1]="!isMacChrome"
     >
+      <div
+        #tabScroll
+        class="flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
       @for (ws of panels.workspaces(); track ws.id; let i = $index) {
         <div
-          class="group relative flex max-w-52 items-center rounded-md electrobun-webkit-app-region-no-drag"
+          [attr.data-tab-id]="ws.id"
+          class="group relative flex max-w-52 shrink-0 items-center rounded-md electrobun-webkit-app-region-no-drag"
           [class.bg-accent]="ws.id === panels.activeWorkspaceId()"
           [class.opacity-50]="draggedId() === ws.id"
           [style.box-shadow]="dropIndicatorShadow(i)"
@@ -69,6 +74,7 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
           }
         </div>
       }
+      </div>
       <button
         (click)="panels.newWorkspace()"
         title="New tab (⌘T)"
@@ -201,6 +207,18 @@ export class TabBar {
   readonly draggedId = signal<number | null>(null);
   readonly dropTarget = signal<{ index: number; before: boolean } | null>(null);
 
+  private readonly tabScroll = viewChild.required<ElementRef<HTMLDivElement>>('tabScroll');
+
+  constructor() {
+    // keep the active tab visible when the strip overflows
+    effect(() => {
+      const id = this.panels.activeWorkspaceId();
+      this.tabScroll()
+        .nativeElement.querySelector(`[data-tab-id="${id}"]`)
+        ?.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+    });
+  }
+
   close(event: MouseEvent, id: number): void {
     event.stopPropagation();
     this.panels.closeWorkspace(id);