From caeabb3b4f876a959599d99d72b30ed10f90dbf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=9F=E6=9E=97=E9=93=96?=
 <jianglincheng@jianglinchengdeMacBook-Pro.local>
Date: Fri, 7 Aug 2026 10:02:13 +0800
Subject: [PATCH] fix: keep annotation comments within mobile viewport

---
 components/work-review/WorkReviewAnnotationMarker.tsx | 4 ++--
 lib/__tests__/work-review-annotation-marker.test.tsx  | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/work-review/WorkReviewAnnotationMarker.tsx b/components/work-review/WorkReviewAnnotationMarker.tsx
index 66a9d44..61cc350 100644
--- a/components/work-review/WorkReviewAnnotationMarker.tsx
+++ b/components/work-review/WorkReviewAnnotationMarker.tsx
@@ -124,7 +124,7 @@ export function WorkReviewAnnotationMarker({
           {item.markerNumber}
         </span>
         <span
-          className={`pointer-events-none absolute -top-0.5 w-max max-w-[min(14rem,calc(100vw-3rem))] whitespace-normal break-words rounded-lg bg-[#101828]/90 px-3 py-2 text-left text-[11px] font-semibold leading-[1.45] text-white shadow-[0_4px_14px_rgba(15,23,42,0.24)] [overflow-wrap:anywhere] ${showComment ? 'block' : 'hidden'} ${commentPosition(minX)}`}
+          className={`pointer-events-none absolute -top-0.5 w-max max-w-[min(10rem,calc(100vw-3rem))] whitespace-normal break-words rounded-lg bg-[#101828]/90 px-3 py-2 text-left text-[11px] font-semibold leading-[1.45] text-white shadow-[0_4px_14px_rgba(15,23,42,0.24)] [overflow-wrap:anywhere] sm:max-w-[min(14rem,calc(100vw-3rem))] ${showComment ? 'block' : 'hidden'} ${commentPosition(minX)}`}
           aria-hidden={!showComment}
         >
           {summary}
@@ -151,7 +151,7 @@ export function WorkReviewAnnotationMarker({
         {item.markerNumber}
       </span>
       <span
-        className={`pointer-events-none absolute top-1/2 w-max max-w-[min(14rem,calc(100vw-3rem))] -translate-y-1/2 whitespace-normal break-words rounded-lg bg-[#101828]/90 px-3 py-2 text-left text-[11px] font-semibold leading-[1.45] text-white shadow-[0_4px_14px_rgba(15,23,42,0.24)] [overflow-wrap:anywhere] ${
+        className={`pointer-events-none absolute top-1/2 w-max max-w-[min(10rem,calc(100vw-3rem))] -translate-y-1/2 whitespace-normal break-words rounded-lg bg-[#101828]/90 px-3 py-2 text-left text-[11px] font-semibold leading-[1.45] text-white shadow-[0_4px_14px_rgba(15,23,42,0.24)] [overflow-wrap:anywhere] sm:max-w-[min(14rem,calc(100vw-3rem))] ${
           showComment ? 'block' : 'hidden'
         } ${
           alignRight ? 'right-9' : 'left-9'
diff --git a/lib/__tests__/work-review-annotation-marker.test.tsx b/lib/__tests__/work-review-annotation-marker.test.tsx
index d794939..4a1be9f 100644
--- a/lib/__tests__/work-review-annotation-marker.test.tsx
+++ b/lib/__tests__/work-review-annotation-marker.test.tsx
@@ -26,7 +26,13 @@ describe('WorkReviewAnnotationMarker', () => {
     )
 
     const visibleComment = screen.getByText(longComment)
-    expect(visibleComment).toHaveClass('whitespace-normal', 'break-words', '[overflow-wrap:anywhere]')
+    expect(visibleComment).toHaveClass(
+      'whitespace-normal',
+      'break-words',
+      'max-w-[min(10rem,calc(100vw-3rem))]',
+      'sm:max-w-[min(14rem,calc(100vw-3rem))]',
+      '[overflow-wrap:anywhere]',
+    )
     expect(visibleComment).not.toHaveClass('truncate')
   })
 })