fix: keep annotation comments within mobile viewport

This commit is contained in:
江林铖 2026-08-07 10:02:13 +08:00
parent 634760393a
commit caeabb3b4f
2 changed files with 9 additions and 3 deletions

View File

@ -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'

View File

@ -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')
})
})