From 1fbf51b7ae9103299bcf48f71276afa9919a0044 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sat, 6 Dec 2025 22:38:43 +0000
Subject: [PATCH] align instance tab accessories to right

---
 packages/ui/src/components/instance-tabs.tsx | 41 +++++++++++---------
 packages/ui/src/styles/panels/tabs.css       | 16 +++++++-
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/instance-tabs.tsx b/packages/ui/src/components/instance-tabs.tsx
index 14537708..35e7162e 100644
--- a/packages/ui/src/components/instance-tabs.tsx
+++ b/packages/ui/src/components/instance-tabs.tsx
@@ -20,24 +20,27 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
       <div class="tab-container" role="tablist">
         <div class="tab-scroll">
           <div class="tab-strip">
-            <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 class="tab-strip-tabs">
+              <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>
+            <div class="tab-strip-spacer" />
             <Show when={Array.from(props.instances.entries()).length > 1}>
               <div class="tab-shortcuts">
                 <KeyboardHint
@@ -49,7 +52,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
             </Show>
             <Show when={Boolean(props.onOpenRemoteAccess)}>
               <button
-                class="new-tab-button"
+                class="new-tab-button tab-remote-button"
                 onClick={() => props.onOpenRemoteAccess?.()}
                 title="Remote connect"
                 aria-label="Remote connect"
diff --git a/packages/ui/src/styles/panels/tabs.css b/packages/ui/src/styles/panels/tabs.css
index cd8c3b78..98bae37e 100644
--- a/packages/ui/src/styles/panels/tabs.css
+++ b/packages/ui/src/styles/panels/tabs.css
@@ -17,18 +17,32 @@
 }
 
 .tab-scroll {
-  @apply flex items-center gap-3 w-full;
+  @apply w-full;
   overflow-x: auto;
 }
 
 .tab-strip {
+  @apply flex items-center gap-2 px-1;
+  min-width: 100%;
+}
+
+.tab-strip-tabs {
   @apply flex items-center gap-1 flex-shrink-0;
 }
 
+.tab-strip-spacer {
+  @apply flex-1;
+  min-width: 1px;
+}
+
 .tab-shortcuts {
   @apply flex items-center gap-2 flex-shrink-0;
 }
 
+.tab-remote-button {
+  @apply flex-shrink-0;
+}
+
 .tab-base {
   @apply inline-flex items-center gap-2 px-3 py-2 rounded-t-md max-w-[200px] transition-colors text-sm font-medium;
   font-family: var(--font-family-sans);