fix(webui): align chat action menu hover inset

This commit is contained in:
Xubin Ren 2026-06-10 20:30:32 +08:00
parent 999552b998
commit 1f5ecf36ca

View File

@ -40,6 +40,8 @@ import type { ChatSummary, SidebarDensity, SidebarSortMode } from "@/lib/types";
const INITIAL_VISIBLE_SESSIONS = 160;
const VISIBLE_SESSIONS_INCREMENT = 160;
const ACTION_MENU_CONTENT_CLASS = "w-[8.5rem] min-w-[8.5rem]";
const ACTION_MENU_ITEM_CLASS = "grid w-[7.75rem] grid-cols-[1rem_minmax(0,1fr)] items-center gap-2";
interface ChatListProps {
sessions: ChatSummary[];
@ -309,32 +311,36 @@ export const ChatList = memo(function ChatList({
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className={ACTION_MENU_CONTENT_CLASS}
portalContainer={actionMenuPortalContainer}
onCloseAutoFocus={(event) => event.preventDefault()}
>
<DropdownMenuItem
onSelect={() => onTogglePin(s.key)}
className={ACTION_MENU_ITEM_CLASS}
>
{isPinned ? (
<PinOff className="mr-2 h-4 w-4" />
<PinOff className="h-4 w-4 shrink-0" />
) : (
<Pin className="mr-2 h-4 w-4" />
<Pin className="h-4 w-4 shrink-0" />
)}
{isPinned ? t("chat.unpin") : t("chat.pin")}
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => onRequestRename(s.key, title)}
className={ACTION_MENU_ITEM_CLASS}
>
<Pencil className="mr-2 h-4 w-4" />
<Pencil className="h-4 w-4 shrink-0" />
{t("chat.rename")}
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => onToggleArchive(s.key)}
className={ACTION_MENU_ITEM_CLASS}
>
{isArchived ? (
<ArchiveRestore className="mr-2 h-4 w-4" />
<ArchiveRestore className="h-4 w-4 shrink-0" />
) : (
<Archive className="mr-2 h-4 w-4" />
<Archive className="h-4 w-4 shrink-0" />
)}
{isArchived ? t("chat.unarchive") : t("chat.archive")}
</DropdownMenuItem>
@ -342,9 +348,12 @@ export const ChatList = memo(function ChatList({
onSelect={() => {
window.setTimeout(() => onRequestDelete(s.key, title), 0);
}}
className="text-destructive focus:text-destructive"
className={cn(
ACTION_MENU_ITEM_CLASS,
"text-destructive focus:text-destructive",
)}
>
<Trash2 className="mr-2 h-4 w-4" />
<Trash2 className="h-4 w-4 shrink-0" />
{t("chat.delete")}
</DropdownMenuItem>
</DropdownMenuContent>
@ -439,11 +448,12 @@ function ProjectGroupHeader({
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className={ACTION_MENU_CONTENT_CLASS}
portalContainer={actionMenuPortalContainer}
onCloseAutoFocus={(event) => event.preventDefault()}
>
<DropdownMenuItem onSelect={onRequestRename}>
<Pencil className="mr-2 h-4 w-4" />
<DropdownMenuItem onSelect={onRequestRename} className={ACTION_MENU_ITEM_CLASS}>
<Pencil className="h-4 w-4 shrink-0" />
{t("chat.rename")}
</DropdownMenuItem>
</DropdownMenuContent>