fix(app): align workspace move menu styling

This commit is contained in:
LukeParkerDev 2026-08-06 08:21:11 +10:00
parent a16dd3d4ed
commit 6c1aabd5e0
3 changed files with 13 additions and 9 deletions

View file

@ -28,6 +28,7 @@ export function SessionWorkspaceMenu(props: {
placement?: ComponentProps<typeof MenuV2>["placement"]
gutter?: number
class?: string
contentClass?: string
children: JSX.Element
onOpenChange?: (open: boolean) => void
}) {
@ -118,19 +119,19 @@ export function SessionWorkspaceMenu(props: {
{props.children}
</MenuV2.Trigger>
<MenuV2.Portal>
<MenuV2.Content class="w-[200px]">
<MenuV2.Content class={`w-[200px] ${props.contentClass ?? ""}`}>
<MenuV2.Group>
<MenuV2.GroupLabel>{language.t("workspace.move.title")}</MenuV2.GroupLabel>
<MenuV2.GroupLabel>{language.t("workspace.move.menu.title")}</MenuV2.GroupLabel>
<MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move("create")}>
<Icon name="workspace-new" />
{language.t("workspace.new")}
</MenuV2.Item>
</MenuV2.Group>
<Show when={workspaces().length > 0}>
<MenuV2.Separator class="h-[0.5px]" />
<MenuV2.Separator class="h-[0.5px] bg-v2-border-border-base" />
<MenuV2.Sub gutter={0} overlap overflowPadding={8}>
<MenuV2.SubTrigger>
<Icon name="workspace" />
<Icon name="workspace-isolated" />
{language.t("session.new.workspace.existing").replace(/…$/, "")}
</MenuV2.SubTrigger>
<MenuV2.Portal>

View file

@ -1141,6 +1141,7 @@ export const dict = {
"settings.workspaces.default.local": "Local directory",
"settings.workspaces.default.new": "New workspace",
"workspace.move.title": "Move to workspace",
"workspace.move.menu.title": "Move session to",
"workspace.move.failed": "Failed to move session",
"workspace.lifecycle.creating": "Creating workspace",
"workspace.lifecycle.created": "Workspace created",

View file

@ -269,7 +269,8 @@ function WorkspaceMoveAction(props: {
classList={{
"group/workspace-move relative shrink-0": true,
"ml-auto h-5 w-[167px]": inline(),
"h-[46px] w-full rounded-b-[6px] bg-v2-background-bg-layer-02 hover:bg-v2-background-bg-layer-03": !inline(),
"-mt-2.5 h-[46px] w-full rounded-b-[6px] bg-v2-background-bg-layer-02 hover:bg-v2-background-bg-layer-03":
!inline(),
invisible: props.dismissed,
}}
>
@ -280,7 +281,8 @@ function WorkspaceMoveAction(props: {
directory={props.directory}
messageID={props.messageID}
placement={inline() ? "bottom-end" : "left-start"}
gutter={inline() ? 4 : -2}
gutter={inline() ? 4 : -22}
contentClass={inline() ? undefined : "relative top-3.5"}
class={
inline()
? "flex h-5 w-full items-center gap-1.5 rounded-[4px] pr-6 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed"
@ -332,9 +334,9 @@ function SessionSummaryPanel(props: {
return (
<div
data-component="session-summary-panel"
class="w-[280px] overflow-hidden rounded-[6px] bg-v2-background-bg-layer-01 shadow-[var(--v2-elevation-floating)]"
class="w-[280px]"
>
<div class="flex flex-col gap-1 px-0.5 py-1.5">
<div class="relative z-[70] flex flex-col gap-1 overflow-hidden rounded-[6px] bg-v2-background-bg-base px-0.5 py-1.5 shadow-[var(--v2-elevation-raised)]">
<div class={row}>
<ProjectAvatar
fallback={displayName(props.project)}
@ -358,7 +360,7 @@ function SessionSummaryPanel(props: {
directory={props.directory}
messageID={props.messageID}
placement="left-start"
gutter={-2}
gutter={-22}
class={`${row} hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed`}
>
<IconV2 name="monitor" class="shrink-0 text-v2-icon-icon-muted" />