fix(app): show tab close button properly (#29523)

packages/app/src/components/titlebar.tsx

@@ -490,7 +490,6 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                             project={projectForSession(tab.info, projects(), projectByID())}
                             directory={tab.dir}
                             onClose={() => tabsStoreActions.removeTab(tab.href)}
-                            hideClose={tabsEnriched().length < 2}
                           />
                         </>
                       )}
@@ -737,14 +736,13 @@ function TabNavItem(props: {
   title: string
   project?: LocalProject
   directory: string
-  hideClose?: boolean
   onClose: () => void
 }) {
   const match = useMatch(() => props.href)
   const isActive = () => !!match()
   return (
     <div
-      class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] pl-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+      class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
       data-active={isActive()}
     >
       <a
@@ -755,7 +753,7 @@ function TabNavItem(props: {
         <span class="text-clip leading-5">{props.title}</span>
       </a>
 
-      <div class="absolute right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2">
+      <div class="absolute not-group-hover:not-group-data-[active=true]:left-52 group-hover:right-0 group-data-[active=true]:right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2">
         <div
           class="absolute inset-0 bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)"
           style={{
@@ -766,7 +764,7 @@ function TabNavItem(props: {
         <IconButtonV2
           size="small"
           variant="ghost-muted"
-          class="opacity-0 group-hover:opacity-100 group-data-[active='true']:opacity-100"
+          class="opacity-0 group-hover:opacity-100 group-data-[active='true']:opacity-100 z-10"
           onClick={props.onClose}
           icon={<IconV2 name="xmark-small" />}
         />