From 492ebdad2e5e3ac2da90e0e309b5036964282058 Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Wed, 21 Oct 2026 13:43:19 +0200
Subject: [PATCH] fix(app): restore project picker layout (#57739)

---
 packages/app/e2e/regression/new-session.spec.ts  | 15 +++++++++++++++
 packages/app/src/new-session/location/dialog.tsx | 15 +++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/app/e2e/regression/new-session.spec.ts b/packages/app/e2e/regression/new-session.spec.ts
index 17586b22bdb..f1b7172f241 100644
--- a/packages/app/e2e/regression/new-session.spec.ts
+++ b/packages/app/e2e/regression/new-session.spec.ts
@@ -594,6 +594,21 @@ test("the location dialog lists every ready server's projects in one list and ta
   // It opens on the first row, not on the draft's current project (the second row).
   await expect(options.nth(0)).toHaveAttribute("aria-selected", "true")
 
+  // The picker shares the palette's full-width search, compact rows, and single-line titles.
+  await expect(options.nth(0)).toHaveCSS("height", "36px")
+  await expect(options.nth(0)).toHaveCSS("display", "flex")
+  await expect(names.nth(0).locator(".command-palette-title")).toHaveCSS("font-size", "13px")
+  await expect(names.nth(0).locator(".command-palette-title")).toHaveCSS("white-space", "nowrap")
+  await expect(options.nth(0)).not.toHaveCSS("background-color", "rgba(0, 0, 0, 0)")
+  await expect
+    .poll(async () => {
+      const field = await dialog.locator('[data-component="text-input-v2"]').boundingBox()
+      const row = await options.nth(0).boundingBox()
+
+      return field && row ? Math.abs(field.width - row.width) : Infinity
+    })
+    .toBeLessThanOrEqual(1)
+
   await search.fill("apollo")
   await expect(names).toHaveText(["opencodeapollo", "sstapollo"])
 
diff --git a/packages/app/src/new-session/location/dialog.tsx b/packages/app/src/new-session/location/dialog.tsx
index 0d5c5cc56c4..ba9e504f3cf 100644
--- a/packages/app/src/new-session/location/dialog.tsx
+++ b/packages/app/src/new-session/location/dialog.tsx
@@ -23,6 +23,7 @@ import { ServerConnection, useServers } from "@/runtime/server/registry"
 import { useGlobal } from "@/runtime/server/runtime"
 import { workspaceSelectionDirectories } from "@/workspaces/paths"
 import "@/shell/commands/dialog.css"
+import "@/shell/palette-menu.css"
 import "./dialog.css"
 
 type LocationEntry =
@@ -299,7 +300,7 @@ function NewSessionLocationDialog(props: {
   return (
     <Dialog class="command-palette" size="large">
       <DialogBody class="command-palette-body">
-        <div class="command-palette-search">
+        <div class="palette-menu-search">
           <TextInput
             ref={inputRef}
             value={store.query}
@@ -359,7 +360,7 @@ function NewSessionLocationDialog(props: {
                     <button
                       type="button"
                       id={typeahead.optionID(entry)}
-                      class="command-palette-row"
+                      class="command-palette-row palette-menu-row"
                       role="option"
                       aria-selected={activeEntry()?.id === entry.id}
                       data-active={activeEntry()?.id === entry.id ? "" : undefined}
@@ -386,7 +387,9 @@ function NewSessionLocationDialog(props: {
                           <div class="command-palette-row-main">
                             <Icon name="plus" class="command-palette-row-icon" />
                             <div class="command-palette-row-text">
-                              <span class="command-palette-title">{language.t("session.new.project.add")}</span>
+                              <span class="command-palette-title palette-menu-title">
+                                {language.t("session.new.project.add")}
+                              </span>
                             </div>
                           </div>
                           <Show when={choosesServer()}>
@@ -398,7 +401,7 @@ function NewSessionLocationDialog(props: {
                             <div class="command-palette-row-main">
                               <Icon name={serverIcon(item().server)} class="command-palette-row-icon" />
                               <div class="command-palette-row-text">
-                                <span class="command-palette-title">{item().server.name}</span>
+                                <span class="command-palette-title palette-menu-title">{item().server.name}</span>
                                 <Show when={item().server.hint}>
                                   {(hint) => <span class="command-palette-description">{hint()}</span>}
                                 </Show>
@@ -466,7 +469,7 @@ function ProjectRow(props: { project: PromptProject; path: string; onDrill?: ()
         />
         <div class="command-palette-row-text">
           <span class="new-session-location-name">
-            <span class="command-palette-title">{displayName(props.project)}</span>
+            <span class="command-palette-title palette-menu-title">{displayName(props.project)}</span>
             <ServerTag server={props.project.server} />
           </span>
           <span class="command-palette-description" dir="ltr">
@@ -533,7 +536,7 @@ function WorkspaceRow(props: { title: string; value: string; description: string
           classList={{ "!text-v2-icon-icon-accent": props.value !== "main" && props.value !== "create" }}
         />
         <div class="command-palette-row-text">
-          <span class="command-palette-title">{props.title}</span>
+          <span class="command-palette-title palette-menu-title">{props.title}</span>
           <span class="command-palette-description" dir="ltr">
             {props.description}
           </span>