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", }} >