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

Author: iamdavidhill

packages/app/src/components/titlebar.tsx

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