diff --git a/packages/app/e2e/regression/tab-navigate-mousedown.spec.ts b/packages/app/e2e/regression/tab-navigate-mousedown.spec.ts
index 402c2a45c21..5c4afa552f8 100644
--- a/packages/app/e2e/regression/tab-navigate-mousedown.spec.ts
+++ b/packages/app/e2e/regression/tab-navigate-mousedown.spec.ts
@@ -9,6 +9,32 @@ const sessionB = session("ses_tab_b", "Tab B session")
const sessionC = session("ses_tab_c", "Tab C session")
const unresolvedSessionID = "ses_tab_unresolved"
+test("new session tab hugs its content", async ({ page }) => {
+ await mockServer(page)
+ await page.addInitScript(
+ ({ server, sessionID, directory }) => {
+ localStorage.setItem(
+ "opencode.window.browser.dat:tabs",
+ JSON.stringify([
+ { type: "session", server, sessionId: sessionID },
+ { type: "draft", server, directory, draftID: "draft_tab_width" },
+ ]),
+ )
+ },
+ { server, sessionID: sessionA.id, directory: sessionA.directory },
+ )
+
+ const href = `/server/${base64Encode(server)}/session/${sessionA.id}`
+ await page.goto(href)
+
+ const sessionTab = page.locator(`[data-titlebar-tab-slot]:has(a[href="${href}"])`)
+ const draftTab = page.locator('[data-titlebar-tab-slot]:has(a[href^="/new-session?draftId="])')
+ await expect(draftTab).toContainText("New session")
+ const width = (await draftTab.boundingBox())?.width ?? 0
+ expect(width).toBeGreaterThan(100)
+ expect(width).toBeLessThan((await sessionTab.boundingBox())?.width ?? 0)
+})
+
test("pressing mouse down on a tab navigates before mouse up", async ({ page }) => {
await mockServer(page)
await page.addInitScript(
diff --git a/packages/app/src/shell/titlebar/tab-nav.tsx b/packages/app/src/shell/titlebar/tab-nav.tsx
index e3be86069de..1859b7bada2 100644
--- a/packages/app/src/shell/titlebar/tab-nav.tsx
+++ b/packages/app/src/shell/titlebar/tab-nav.tsx
@@ -393,8 +393,11 @@ export function DraftTabItem(props: {
data-active={props.active}
data-dragging={props.dragging}
data-state={props.active || props.pressed ? "pressed" : undefined}
- class="group relative flex h-7 w-full min-w-0 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] px-1.5 [container-type:inline-size] whitespace-nowrap"
- classList={{ invisible: props.hidden }}
+ class="group relative flex h-7 min-w-0 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] px-1.5 whitespace-nowrap"
+ classList={{
+ invisible: props.hidden,
+ "w-full [container-type:inline-size]": props.orientation === "vertical",
+ }}
onMouseDown={(event) => {
if (event.button !== MIDDLE_MOUSE_BUTTON) return
event.preventDefault()
@@ -427,14 +430,16 @@ export function DraftTabItem(props: {
if (props.suppressNavigation) return
props.onNavigate()
}}
- class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base [-webkit-user-drag:none]"
+ class="flex h-full min-w-0 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base [-webkit-user-drag:none]"
+ classList={{ "flex-1": props.orientation === "vertical", "flex-none pe-10": props.orientation !== "vertical" }}
>
{props.title}
diff --git a/packages/app/src/shell/titlebar/tab-strip.tsx b/packages/app/src/shell/titlebar/tab-strip.tsx
index 634e5141289..1cca819e104 100644
--- a/packages/app/src/shell/titlebar/tab-strip.tsx
+++ b/packages/app/src/shell/titlebar/tab-strip.tsx
@@ -212,7 +212,7 @@ function DraftTabSlot(props: {
data-orientation={props.orientation}
class="relative flex"
classList={{
- "w-56 min-w-7 max-w-56 flex-shrink": props.orientation === "horizontal",
+ "w-max min-w-7 max-w-56 shrink-0": props.orientation === "horizontal",
"w-full shrink-0": props.orientation === "vertical",
}}
>