From 9e0fbd185d2878432aa1e69853b96d30e898fe8d Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Wed, 3 Dec 2025 00:09:07 +0000
Subject: [PATCH] keep instance tab close buttons visible

---
 packages/ui/src/components/instance-tabs.tsx | 56 ++++++++++----------
 packages/ui/src/styles/panels.css            |  2 +-
 packages/ui/src/styles/panels/tabs.css       |  2 +-
 3 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/packages/ui/src/components/instance-tabs.tsx b/packages/ui/src/components/instance-tabs.tsx
index 4fe8c7a1..83503420 100644
--- a/packages/ui/src/components/instance-tabs.tsx
+++ b/packages/ui/src/components/instance-tabs.tsx
@@ -17,35 +17,37 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
   return (
     <div class="tab-bar tab-bar-instance">
       <div class="tab-container" role="tablist">
-        <div class="flex items-center gap-1 overflow-x-auto">
-          <For each={Array.from(props.instances.entries())}>
-            {([id, instance]) => (
-              <InstanceTab
-                instance={instance}
-                active={id === props.activeInstanceId}
-                onSelect={() => props.onSelect(id)}
-                onClose={() => props.onClose(id)}
-              />
-            )}
-          </For>
-          <button
-            class="new-tab-button"
-            onClick={props.onNew}
-            title="New instance (Cmd/Ctrl+N)"
-            aria-label="New instance"
-          >
-            <Plus class="w-4 h-4" />
-          </button>
-        </div>
-        <Show when={Array.from(props.instances.entries()).length > 1}>
-          <div class="flex-shrink-0 ml-4">
-            <KeyboardHint
-              shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(
-                Boolean,
+        <div class="tab-scroll flex items-center gap-3 overflow-x-auto w-full">
+          <div class="flex items-center gap-1">
+            <For each={Array.from(props.instances.entries())}>
+              {([id, instance]) => (
+                <InstanceTab
+                  instance={instance}
+                  active={id === props.activeInstanceId}
+                  onSelect={() => props.onSelect(id)}
+                  onClose={() => props.onClose(id)}
+                />
               )}
-            />
+            </For>
+            <button
+              class="new-tab-button"
+              onClick={props.onNew}
+              title="New instance (Cmd/Ctrl+N)"
+              aria-label="New instance"
+            >
+              <Plus class="w-4 h-4" />
+            </button>
           </div>
-        </Show>
+          <Show when={Array.from(props.instances.entries()).length > 1}>
+            <div class="flex-shrink-0 ml-auto pl-4">
+              <KeyboardHint
+                shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(
+                  Boolean,
+                )}
+              />
+            </div>
+          </Show>
+        </div>
       </div>
     </div>
   )
diff --git a/packages/ui/src/styles/panels.css b/packages/ui/src/styles/panels.css
index b23ac9f0..b185a4f7 100644
--- a/packages/ui/src/styles/panels.css
+++ b/packages/ui/src/styles/panels.css
@@ -52,7 +52,7 @@
 }
 
 .tab-close {
-  @apply opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
+  @apply opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
 }
 
 .tab-close:focus-visible {
diff --git a/packages/ui/src/styles/panels/tabs.css b/packages/ui/src/styles/panels/tabs.css
index 2dd75b7d..dd0a674f 100644
--- a/packages/ui/src/styles/panels/tabs.css
+++ b/packages/ui/src/styles/panels/tabs.css
@@ -51,7 +51,7 @@
 }
 
 .tab-close {
-  @apply opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
+  @apply opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
 }
 
 .tab-close:focus-visible {