From 91d30c24fcf95e8c7ee700d1d4cdb25e7544a81b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=93=9B=F0=9D=93=B2=F0=9D=93=BD=F0=9D=93=BD?= =?UTF-8?q?=F0=9D=93=B5=F0=9D=93=AE=20=F0=9D=93=95=F0=9D=93=BB=F0=9D=93=AA?= =?UTF-8?q?=F0=9D=93=B7=F0=9D=93=B4?= Date: Fri, 26 Jun 2026 04:41:04 +0000 Subject: [PATCH] fix(app): restore tab overflow wrapper --- .../app/src/components/titlebar-tab-nav.tsx | 12 +-- .../app/src/components/titlebar-tab-strip.tsx | 91 +++++++++++-------- 2 files changed, 54 insertions(+), 49 deletions(-) diff --git a/packages/app/src/components/titlebar-tab-nav.tsx b/packages/app/src/components/titlebar-tab-nav.tsx index f28941a8dcb3..9d9df7d2c9a8 100644 --- a/packages/app/src/components/titlebar-tab-nav.tsx +++ b/packages/app/src/components/titlebar-tab-nav.tsx @@ -15,7 +15,6 @@ import "./titlebar-tab-nav.css" export function TabNavItem(props: { ref?: Ref - tabKey: string href: string server: ServerConnection.Key session: () => Session | undefined @@ -176,13 +175,11 @@ export function TabNavItem(props: { forwardTabRef(props.ref, el) }} data-titlebar-tab - data-titlebar-tab-slot - data-tab-key={props.tabKey} data-slot="titlebar-tab-item" data-title-overflow={titleOverflowing()} data-editing={editing()} - class="group relative flex h-7 w-56 min-w-7 max-w-56 flex-shrink select-none flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]" - classList={{ invisible: props.hidden, hidden: !props.session() }} + class="group relative flex h-7 w-full min-w-0 select-none flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]" + classList={{ invisible: props.hidden }} data-active={props.active} data-dragging={props.dragging} data-pressed={props.pressed} @@ -279,7 +276,6 @@ export function TabNavItem(props: { export function DraftTabItem(props: { ref?: Ref - tabKey: string href: string title: string active?: boolean @@ -299,13 +295,11 @@ export function DraftTabItem(props: {
forwardTabRef(props.ref, el)} data-titlebar-tab - data-titlebar-tab-slot - data-tab-key={props.tabKey} data-slot="titlebar-tab-item" data-active={props.active} data-dragging={props.dragging} data-pressed={props.pressed} - class="group relative flex h-7 w-56 min-w-7 max-w-56 flex-shrink flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] whitespace-nowrap transition-transform [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]" + class="group relative flex h-7 w-full min-w-0 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] whitespace-nowrap [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]" classList={{ invisible: props.hidden }} onMouseDown={(event) => { if (event.button !== 1) return diff --git a/packages/app/src/components/titlebar-tab-strip.tsx b/packages/app/src/components/titlebar-tab-strip.tsx index 2123fae880d0..ef404157e408 100644 --- a/packages/app/src/components/titlebar-tab-strip.tsx +++ b/packages/app/src/components/titlebar-tab-strip.tsx @@ -81,32 +81,38 @@ function SessionTabSlot(props: { }) return ( - { - sortable.ref(el) - ref = el - }} - tabKey={props.id} - href={tabHref(props.tab)} - server={props.tab.server} - session={session} - onTitleChange={(title) => { - const value = session() - const ctx = props.serverCtx() - if (value && ctx) ctx.sync.session.remember({ ...value, title }) - }} - onTitleChangeFailed={(title) => { - const value = session() - const ctx = props.serverCtx() - if (value && ctx) ctx.sync.session.remember({ ...value, title }) - }} - onNavigate={() => props.onNavigate(ref)} - onClose={props.onClose} - active={props.active()} - activeServer={props.tab.server === props.activeServerKey} - forceTruncate={props.forceTruncate} - dragging={sortable.isDragSource()} - /> +
+ { + ref = el + }} + href={tabHref(props.tab)} + server={props.tab.server} + session={session} + onTitleChange={(title) => { + const value = session() + const ctx = props.serverCtx() + if (value && ctx) ctx.sync.session.remember({ ...value, title }) + }} + onTitleChangeFailed={(title) => { + const value = session() + const ctx = props.serverCtx() + if (value && ctx) ctx.sync.session.remember({ ...value, title }) + }} + onNavigate={() => props.onNavigate(ref)} + onClose={props.onClose} + active={props.active()} + activeServer={props.tab.server === props.activeServerKey} + forceTruncate={props.forceTruncate} + dragging={sortable.isDragSource()} + /> +
) } @@ -130,19 +136,24 @@ function DraftTabSlot(props: { let ref!: HTMLDivElement return ( - { - sortable.ref(el) - ref = el - }} - tabKey={props.id} - href={tabHref(props.tab)} - title={props.title} - onNavigate={() => props.onNavigate(ref)} - onClose={props.onClose} - active={props.active()} - dragging={sortable.isDragSource()} - /> +
+ { + ref = el + }} + href={tabHref(props.tab)} + title={props.title} + onNavigate={() => props.onNavigate(ref)} + onClose={props.onClose} + active={props.active()} + dragging={sortable.isDragSource()} + /> +
) } @@ -222,7 +233,7 @@ export function TitlebarTabStrip(props: { if (!source) return const tab = props.tabs.find((item) => tabKey(item) === source.id.toString()) if (!tab) return - const tabEl = source.element?.closest("[data-titlebar-tab]") + const tabEl = source.element?.querySelector("[data-titlebar-tab]") props.onNavigate(tab, tabEl ?? undefined) }} onDragEnd={(event) => {