fix(app): shrink new session tab (#46737)

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(

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" }}
       >
         <span class="flex size-4 shrink-0 items-center justify-center">
           <Icon name="edit" />
         </span>
         <span
           data-titlebar-tab-title
-          class="min-w-0 flex-1 overflow-hidden text-clip whitespace-nowrap outline-none leading-4"
+          class="min-w-0 overflow-hidden text-clip whitespace-nowrap outline-none leading-4"
+          classList={{ "flex-1": props.orientation === "vertical", "flex-none": props.orientation !== "vertical" }}
         >
           {props.title}
         </span>

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