- {props.children}
-
-
+
+
-
+
+
+
+
+
+
+
+ {props.children}
+
+
@@ -299,6 +308,7 @@ export function TabNavItem(props: {
return (
{
if (value && previewBlocked()) return
@@ -325,6 +335,7 @@ export function DraftTabItem(props: {
dragging?: boolean
pressed?: boolean
hidden?: boolean
+ orientation?: "horizontal" | "vertical"
}) {
const language = useLanguage()
const closeTab = (event: MouseEvent) => {
@@ -337,6 +348,7 @@ export function DraftTabItem(props: {
ref={(el) => forwardTabRef(props.ref, el)}
data-titlebar-tab
data-slot="titlebar-tab-item"
+ data-orientation={props.orientation ?? "horizontal"}
data-active={props.active}
data-dragging={props.dragging}
data-state={props.active || props.pressed ? "pressed" : undefined}
diff --git a/packages/app/src/shell/titlebar/tab-popover.css b/packages/app/src/shell/titlebar/tab-popover.css
index a213e520310..99fa0bbd46d 100644
--- a/packages/app/src/shell/titlebar/tab-popover.css
+++ b/packages/app/src/shell/titlebar/tab-popover.css
@@ -8,6 +8,7 @@
z-index: 50;
box-sizing: border-box;
width: 256px;
+ max-width: calc(100dvw - 24px);
display: flex;
flex-direction: column;
gap: 6px;
diff --git a/packages/app/src/shell/titlebar/tab-popover.tsx b/packages/app/src/shell/titlebar/tab-popover.tsx
index d3385b6316b..0b9adcaab63 100644
--- a/packages/app/src/shell/titlebar/tab-popover.tsx
+++ b/packages/app/src/shell/titlebar/tab-popover.tsx
@@ -1,9 +1,10 @@
import { HoverCard } from "@kobalte/core/hover-card"
import { createSignal, Show, type JSXElement } from "solid-js"
+import { useLanguage } from "@/runtime/i18n/language"
import "./tab-popover.css"
// Initial hover delay before the preview appears, per design.
-const OPEN_DELAY = 2_000
+const OPEN_DELAY = 750
// Mouse-out delay: begin closing immediately (a brief exit animation plays).
const CLOSE_DELAY = 0
// After a preview closes, hovering a neighbouring tab within this window skips
@@ -24,7 +25,9 @@ export function TabPreviewPopover(props: {
open: boolean
onOpenChange: (open: boolean) => void
data: TabPreviewData
+ orientation?: "horizontal" | "vertical"
}) {
+ const language = useLanguage()
let triggerEl: HTMLDivElement | undefined
// When opened during a rapid tab-hopping streak, this preview appears and
// disappears instantly (no repeated enter/exit animation) — only the first,
@@ -50,7 +53,13 @@ export function TabPreviewPopover(props: {
// The preview is non-interactive (pointer-events: none), so there is no
// safe area to traverse — leaving the tab hides it immediately.
ignoreSafeArea
- placement="bottom-start"
+ placement={
+ props.orientation === "vertical"
+ ? language.direction() === "rtl"
+ ? "left-start"
+ : "right-start"
+ : "bottom-start"
+ }
gutter={6}
>
diff --git a/packages/app/src/shell/titlebar/tab-strip.tsx b/packages/app/src/shell/titlebar/tab-strip.tsx
index 1d8a3d34f67..8ae11ba749c 100644
--- a/packages/app/src/shell/titlebar/tab-strip.tsx
+++ b/packages/app/src/shell/titlebar/tab-strip.tsx
@@ -4,7 +4,7 @@ import { createResizeObserver } from "@solid-primitives/resize-observer"
import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
import { isSortable, useSortable } from "@dnd-kit/solid/sortable"
import { Accessibility, AutoScroller, Feedback, PointerActivationConstraints } from "@dnd-kit/dom"
-import { RestrictToHorizontalAxis } from "@dnd-kit/abstract/modifiers"
+import { RestrictToHorizontalAxis, RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers"
import { RestrictToElement } from "@dnd-kit/dom/modifiers"
import { arrayMove } from "@dnd-kit/helpers"
import { tabHref, tabKey, type SessionTab, type Tab } from "@/shell/tabs/tabs"
@@ -27,6 +27,7 @@ function SessionTabSlot(props: {
index: number
active: boolean
forceTruncate: boolean
+ orientation: "horizontal" | "vertical"
session: SessionInfo | undefined
fallbackTitle?: string
onRename: (title: string) => Promise
@@ -49,7 +50,12 @@ function SessionTabSlot(props: {
data-titlebar-tab-slot
data-tab-key={props.id}
data-active={props.active}
- class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
+ data-orientation={props.orientation}
+ class="relative flex"
+ classList={{
+ "w-56 min-w-7 max-w-56 flex-shrink": props.orientation === "horizontal",
+ "w-full shrink-0": props.orientation === "vertical",
+ }}
>
{
@@ -65,6 +71,7 @@ function SessionTabSlot(props: {
active={props.active}
forceTruncate={props.forceTruncate}
dragging={sortable.isDragSource()}
+ orientation={props.orientation}
/>
)
@@ -76,6 +83,7 @@ function SessionTabEntry(props: {
index: number
active: boolean
forceTruncate: boolean
+ orientation: "horizontal" | "vertical"
serverCtx: ServerCtx | undefined
onVisibleChange: (visible: boolean) => void
onNavigate: (element: HTMLDivElement) => void
@@ -160,6 +168,7 @@ function SessionTabEntry(props: {
index={props.index}
active={props.active}
forceTruncate={props.forceTruncate}
+ orientation={props.orientation}
session={session()}
fallbackTitle={persisted()?.title ?? (missingSession() ? language.t("session.tab.unknown") : undefined)}
onRename={rename}
@@ -175,6 +184,7 @@ function DraftTabSlot(props: {
id: string
index: number
active: boolean
+ orientation: "horizontal" | "vertical"
title: string
onNavigate: (element: HTMLDivElement) => void
onClose: () => void
@@ -195,7 +205,12 @@ function DraftTabSlot(props: {
data-titlebar-tab-slot
data-tab-key={props.id}
data-active={props.active}
- class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
+ data-orientation={props.orientation}
+ class="relative flex"
+ classList={{
+ "w-56 min-w-7 max-w-56 flex-shrink": props.orientation === "horizontal",
+ "w-full shrink-0": props.orientation === "vertical",
+ }}
>