@@ -107,13 +109,19 @@ const InactiveSessionTab: React.FC<{
}
}}
className={cn(
- 'group/session-tab flex h-8 max-w-[200px] cursor-pointer touch-none select-none items-center rounded-[10px] px-3',
- 'text-muted-foreground transition-colors duration-150 hover:bg-interactive-hover/40 hover:text-foreground',
- menuOpen && 'bg-interactive-hover/40 text-foreground',
+ 'group/session-tab relative flex h-7 w-full min-w-0 cursor-pointer touch-none select-none items-center rounded-md px-2',
+ 'text-muted-foreground transition-colors duration-150 hover:bg-interactive-hover hover:text-foreground',
+ menuOpen && 'bg-interactive-hover text-foreground',
)}
title={title}
>
-
+
{title}
@@ -124,10 +132,10 @@ const InactiveSessionTab: React.FC<{
onClick={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
className={cn(
- 'ml-0 hidden w-0 shrink-0 items-center justify-center overflow-hidden rounded-md text-muted-foreground',
+ 'absolute right-1 top-1/2 hidden size-5 -translate-y-1/2 items-center justify-center rounded text-muted-foreground',
'opacity-0 transition-opacity duration-150 hover:text-foreground',
- 'group-hover/session-tab:ml-1.5 group-hover/session-tab:flex group-hover/session-tab:h-5 group-hover/session-tab:w-5 group-hover/session-tab:opacity-100',
- menuOpen && 'ml-1.5 flex h-5 w-5 opacity-100',
+ 'group-hover/session-tab:flex group-hover/session-tab:opacity-100',
+ menuOpen && 'flex opacity-100',
)}
>
@@ -298,7 +306,7 @@ export const SessionTabsStrip: React.FC<{ children: React.ReactNode }> = ({ chil
= ({ chil
{children}
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index c487cd09..d37798cc 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -1781,3 +1781,25 @@ html.desktop-runtime [class*="cursor-pointer"] {
html.desktop-runtime .markdown-content [data-openchamber-file-link="true"] {
cursor: default;
}
+
+/* Header session tabs: thin separators between inactive neighbours, hidden
+ around the active or hovered tab (mirrors the titlebar tab language). */
+.session-tab-slot {
+ position: relative;
+}
+.session-tab-slot:not(:first-child):not([data-active='true'])::before {
+ content: '';
+ position: absolute;
+ top: 8px;
+ inset-inline-start: -2.75px;
+ width: 1.5px;
+ height: 12px;
+ border-radius: 9999px;
+ background: var(--border);
+ opacity: 0.6;
+}
+.session-tab-slot[data-active='true'] + .session-tab-slot::before,
+.session-tab-slot:not([data-active='true']):hover::before,
+.session-tab-slot:not([data-active='true']):hover + .session-tab-slot::before {
+ display: none;
+}