From 0f57279c771b466146d62a8c58b0beef05b61c91 Mon Sep 17 00:00:00 2001
From: shiyue <935732994@qq.com>
Date: Tue, 25 Aug 2026 22:02:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8D=A1=E7=89=87=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95=E5=BA=95=E9=83=A8=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../board/components/CardContextMenu.tsx      | 63 ++++++++++++++++---
 1 file changed, 56 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/views/board/components/CardContextMenu.tsx b/apps/web/src/views/board/components/CardContextMenu.tsx
index 3b84e3cd..40f53e86 100644
--- a/apps/web/src/views/board/components/CardContextMenu.tsx
+++ b/apps/web/src/views/board/components/CardContextMenu.tsx
@@ -1,15 +1,17 @@
 import { t } from "@lingui/core/macro";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   HiLink,
+  HiOutlineArrowRightCircle,
   HiOutlineCalendar,
   HiOutlineDocumentDuplicate,
   HiOutlineTag,
   HiOutlineTrash,
   HiOutlineUserGroup,
-  HiOutlineArrowRightCircle,
 } from "react-icons/hi2";
 
+import { useIsomorphicLayoutEffect } from "~/hooks/useIsomorphicLayoutEffect";
+
 export type CardContextMenuAction =
   | "members"
   | "move"
@@ -85,6 +87,55 @@ export function CardContextMenu({
   canEdit,
 }: CardContextMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x, y });
+
+  const items = MENU_ITEMS.filter((item) => !item.requiresEdit || canEdit);
+
+  useIsomorphicLayoutEffect(() => {
+    const menu = menuRef.current;
+    if (!menu) return;
+
+    const gutter = 8;
+    const updatePosition = () => {
+      const { width, height } = menu.getBoundingClientRect();
+      const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+      const viewportHeight =
+        window.visualViewport?.height ?? window.innerHeight;
+      const maxX = Math.max(gutter, viewportWidth - width - gutter);
+      const maxY = Math.max(gutter, viewportHeight - height - gutter);
+      const nextPosition = {
+        x: Math.min(Math.max(x, gutter), maxX),
+        y: Math.min(Math.max(y, gutter), maxY),
+      };
+
+      setPosition((currentPosition) =>
+        currentPosition.x === nextPosition.x &&
+        currentPosition.y === nextPosition.y
+          ? currentPosition
+          : nextPosition,
+      );
+    };
+
+    updatePosition();
+
+    const resizeObserver =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(updatePosition)
+        : null;
+    resizeObserver?.observe(menu);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    window.visualViewport?.addEventListener("resize", updatePosition);
+    window.visualViewport?.addEventListener("scroll", updatePosition);
+
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.visualViewport?.removeEventListener("resize", updatePosition);
+      window.visualViewport?.removeEventListener("scroll", updatePosition);
+    };
+  }, [x, y, canEdit, items.length]);
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
@@ -103,13 +154,11 @@ export function CardContextMenu({
     };
   }, [onClose]);
 
-  const items = MENU_ITEMS.filter((item) => !item.requiresEdit || canEdit);
-
   return (
     <div
       ref={menuRef}
-      className="fixed z-[200] min-w-[200px] rounded-md border border-light-200 bg-white py-1 shadow-lg dark:border-dark-400 dark:bg-dark-200"
-      style={{ left: x, top: y }}
+      className="fixed z-[200] max-h-[calc(100dvh-1rem)] min-w-[min(200px,calc(100vw-1rem))] max-w-[calc(100vw-1rem)] overflow-y-auto overflow-x-hidden rounded-md border border-light-200 bg-white py-1 shadow-lg dark:border-dark-400 dark:bg-dark-200"
+      style={{ left: position.x, top: position.y }}
     >
       {items.map(({ action, label, icon }) => (
         <button
@@ -119,7 +168,7 @@ export function CardContextMenu({
             onAction(action);
             onClose();
           }}
-          className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
+          className="flex w-full items-center gap-2 break-words px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
         >
           {icon}
           {label}