fix(app): avoid clipping new session during sidebar anim

This commit is contained in:
David Hill 2026-03-12 23:40:09 +00:00 committed by Adam
parent ffde837e83
commit 050d71bcf9
No known key found for this signature in database
GPG Key ID: 9CB48779AF150E75

View File

@ -218,40 +218,47 @@ export function Titlebar() {
<div class="hidden xl:flex items-center shrink-0"> <div class="hidden xl:flex items-center shrink-0">
<Show when={params.dir}> <Show when={params.dir}>
<div <div
class="overflow-hidden flex items-center shrink-0 transition-[width,opacity,transform]" class="flex items-center shrink-0 w-8 mr-1"
classList={{
"w-8 opacity-100 translate-x-0": !layout.sidebar.opened(),
"w-0 opacity-0 -translate-x-1 pointer-events-none": layout.sidebar.opened(),
"duration-180 ease-out": !layout.sidebar.opened(),
"duration-120 ease-in": layout.sidebar.opened(),
}}
aria-hidden={layout.sidebar.opened() ? "true" : undefined} aria-hidden={layout.sidebar.opened() ? "true" : undefined}
> >
<TooltipKeybind <div
placement="bottom" class="transition-opacity"
title={language.t("command.session.new")} classList={{
keybind={command.keybind("session.new")} "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
openDelay={2000} "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
}}
> >
<Button <TooltipKeybind
variant="ghost" placement="bottom"
icon={creating() ? "new-session-active" : "new-session"} title={language.t("command.session.new")}
class="titlebar-icon w-8 h-6 p-0 box-border" keybind={command.keybind("session.new")}
disabled={layout.sidebar.opened()} openDelay={2000}
tabIndex={layout.sidebar.opened() ? -1 : undefined} >
onClick={() => { <Button
if (!params.dir) return variant="ghost"
navigate(`/${params.dir}/session`) icon={creating() ? "new-session-active" : "new-session"}
}} class="titlebar-icon w-8 h-6 p-0 box-border"
aria-label={language.t("command.session.new")} disabled={layout.sidebar.opened()}
aria-current={creating() ? "page" : undefined} tabIndex={layout.sidebar.opened() ? -1 : undefined}
/> onClick={() => {
</TooltipKeybind> if (!params.dir) return
navigate(`/${params.dir}/session`)
}}
aria-label={language.t("command.session.new")}
aria-current={creating() ? "page" : undefined}
/>
</TooltipKeybind>
</div>
</div> </div>
</Show> </Show>
<div <div
class="flex items-center gap-0 transition-[margin] duration-180 ease-out" class="flex items-center gap-0 transition-transform"
classList={{ "ml-1": !!params.dir && !layout.sidebar.opened() }} classList={{
"translate-x-0": !layout.sidebar.opened(),
"-translate-x-[36px]": layout.sidebar.opened(),
"duration-180 ease-out": !layout.sidebar.opened(),
"duration-180 ease-in": layout.sidebar.opened(),
}}
> >
<Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}> <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
<Button <Button