fix: keep annotation comments within mobile viewport
This commit is contained in:
parent
634760393a
commit
caeabb3b4f
@ -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'
|
||||
|
||||
@ -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')
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user