tweak(ui): center titlebar search and soften keybind

Mount the titlebar search in the center area and tune its sizing/spacing; use regular weight for the keybind pill text.

3 files changed, 7 insertions, 9 deletions

diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index e65425569..536de5473 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -311,23 +311,21 @@ export function SessionHeader() {
     platform,
   })
 
-  const leftMount = createMemo(
-    () => document.getElementById("opencode-titlebar-left") ?? document.getElementById("opencode-titlebar-center"),
-  )
+  const centerMount = createMemo(() => document.getElementById("opencode-titlebar-center"))
   const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right"))
 
   return (
     <>
-      <Show when={leftMount()}>
+      <Show when={centerMount()}>
         {(mount) => (
           <Portal mount={mount()}>
             <button
               type="button"
-              class="hidden md:flex w-[320px] max-w-full min-w-0 h-[24px] px-2 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-base bg-surface-panel transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
+              class="hidden md:flex w-[240px] max-w-full min-w-0 h-[24px] pl-0.5 pr-2 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-panel transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
               onClick={() => command.trigger("file.open")}
               aria-label={language.t("session.header.searchFiles")}
             >
-              <div class="flex min-w-0 flex-1 items-center gap-2 overflow-visible">
+              <div class="flex min-w-0 flex-1 items-center gap-1.5 overflow-visible">
                 <Icon name="magnifying-glass" size="normal" class="icon-base shrink-0" />
                 <span class="flex-1 min-w-0 text-12-regular text-text-weak truncate h-4.5 flex items-center">
                   {language.t("session.header.search.placeholder", { project: name() })}
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index defbc813b..760f40fc0 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -267,7 +267,7 @@ export function Titlebar() {
         <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
       </div>
 
-      <div class="min-w-0 flex items-center justify-center pointer-events-none lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center">
+      <div class="min-w-0 flex items-center justify-center pointer-events-none">
         <div id="opencode-titlebar-center" class="pointer-events-auto w-full min-w-0 flex justify-center lg:w-fit" />
       </div>
 
diff --git a/packages/ui/src/components/keybind.css b/packages/ui/src/components/keybind.css
index 1a9e5dce4..420619ae4 100644
--- a/packages/ui/src/components/keybind.css
+++ b/packages/ui/src/components/keybind.css
@@ -9,10 +9,10 @@
   background: var(--surface-base);
   box-shadow: var(--shadow-xxs-border);
 
-  /* text-12-medium */
+  /* text-12-regular */
   font-family: var(--font-family-sans);
   font-size: 12px;
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
   line-height: 1;
   color: var(--text-weak);
 }