diff options
| author | David Hill <[email protected]> | 2026-02-17 14:12:32 +0000 |
|---|---|---|
| committer | David Hill <[email protected]> | 2026-02-17 14:37:44 +0000 |
| commit | ce0844273241ce842593cf55800b1409c01966cf (patch) | |
| tree | 306680ee8e89047349584dcd751d29a1fa6373e9 /packages/app/src | |
| parent | 8fcfbd697a18477b899ca17454089c05e48366b8 (diff) | |
| download | opencode-ce0844273241ce842593cf55800b1409c01966cf.tar.gz opencode-ce0844273241ce842593cf55800b1409c01966cf.zip | |
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.
Diffstat (limited to 'packages/app/src')
| -rw-r--r-- | packages/app/src/components/session/session-header.tsx | 10 | ||||
| -rw-r--r-- | packages/app/src/components/titlebar.tsx | 2 |
2 files changed, 5 insertions, 7 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> |