diff options
| -rw-r--r-- | packages/app/src/pages/layout.tsx | 17 | ||||
| -rw-r--r-- | packages/ui/src/components/hover-card.css | 3 |
2 files changed, 18 insertions, 2 deletions
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx index 4cecec87d..4d1c1f73b 100644 --- a/packages/app/src/pages/layout.tsx +++ b/packages/app/src/pages/layout.tsx @@ -138,6 +138,8 @@ export default function Layout(props: ParentProps) { const isBusy = (directory: string) => busyWorkspaces().has(workspaceKey(directory)) const editorRef = { current: undefined as HTMLInputElement | undefined } + const [hoverSession, setHoverSession] = createSignal<string | undefined>() + const autoselecting = createMemo(() => { if (params.dir) return false if (initialDir) return false @@ -1540,7 +1542,15 @@ export default function Layout(props: ParentProps) { </Tooltip> } > - <HoverCard openDelay={1000} closeDelay={0} placement="right-start" gutter={28} trigger={item}> + <HoverCard + openDelay={1000} + closeDelay={0} + placement="right" + gutter={28} + trigger={item} + open={hoverSession() === props.session.id} + onOpenChange={(open) => setHoverSession(open ? props.session.id : undefined)} + > <Show when={hoverReady()} fallback={<div class="text-12-regular text-text-weak">{language.t("session.messages.loading")}</div>} @@ -1921,7 +1931,10 @@ export default function Layout(props: ParentProps) { placement="right-start" gutter={6} trigger={trigger} - onOpenChange={setOpen} + onOpenChange={(value) => { + setOpen(value) + if (value) setHoverSession(undefined) + }} > <div class="-m-3 p-2 flex flex-col w-72"> <div class="px-4 pt-2 pb-1 text-14-medium text-text-strong truncate">{displayName(props.project)}</div> diff --git a/packages/ui/src/components/hover-card.css b/packages/ui/src/components/hover-card.css index 70dcdd7a2..43918bf38 100644 --- a/packages/ui/src/components/hover-card.css +++ b/packages/ui/src/components/hover-card.css @@ -8,6 +8,7 @@ z-index: 50; min-width: 200px; max-width: 320px; + max-height: calc(100vh - 1rem); border-radius: 8px; background-color: var(--surface-raised-stronger-non-alpha); pointer-events: auto; @@ -32,6 +33,8 @@ [data-slot="hover-card-body"] { padding: 4px; + max-height: inherit; + overflow-y: auto; } } |