San Manjiro

Решил проблему сам, оставлю решение, проблема заключается в том, что все ссылки аннотаций размещаются поверх через абсолютную позицию, из-за этого, если нарушаются пропорции экрана, т.е. ширины, все ссылки съезжают, я убрал из компонента TextLayer как scss, так и пропст в , после добавил ref в div, ref={documentWrapperRef}, и в Page добавил вот такую запись width={documentWrapperRef.current?.getBoundingClientRect().width || undefined}. Все работает отлично, вот рабочий код:

'use client';
import { useRef } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';

// COMPONENTS
import { useModalControl } from '@components/modals/document-modal/hooks/useModalControl';
import { usePdfViewer } from '@components/modals/document-modal/hooks/usePdfViewer';
import { PdfControls } from './components/PdfControls';

// STYLES
import 'react-pdf/dist/Page/AnnotationLayer.css';
import style from './DocumentModal.module.scss';

// Установите worker
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();

interface DocumentModalProps {
	isOpen: boolean;
	onClose: () => void;
	documentUrl: string;
}

export const DocumentModal = ({ isOpen, onClose, documentUrl }: DocumentModalProps) => {
	const dialogRef = useModalControl(isOpen);
	const documentWrapperRef = useRef<HTMLDivElement>(null);
	const {
		scale,
		isLoading,
		error,
		numPages,
		handleZoomIn,
		handleZoomOut,
		handleLoadSuccess,
		handleLoadError,
		handleDownload,
	} = usePdfViewer();

	if (!isOpen) return null;

	return (
		<dialog ref={dialogRef} className={style['document-modal']} onClose={onClose}>
			<div
				className={style['document-modal__overlay']}
				onClick={e => {
					if (e.target === e.currentTarget) {
						onClose();
					}
				}}
			>
				<div className={style['document-modal__wrapper']}>
					<PdfControls
						scale={scale}
						onZoomIn={handleZoomIn}
						onZoomOut={handleZoomOut}
						onDownload={() => handleDownload(documentUrl)}
						onClose={onClose}
					/>

					<div className={style['document-modal__content']} ref={documentWrapperRef}>
						{isLoading && <div className={style['document-modal__loader']}>Загрузка документа...</div>}
						{error && <div className={style['document-modal__error']}>{error}</div>}

						<Document
							file={documentUrl}
							onLoadSuccess={handleLoadSuccess}
							onLoadError={handleLoadError}
							loading={null}
							noData={null}
							externalLinkTarget='_blank'
						>
							{Array.from(new Array(numPages), (el, index) => (
								<Page
									key={`page_${index + 1}`}
									pageNumber={index + 1}
									renderAnnotationLayer={true}
									scale={scale}
									className={style['document-modal__page']}
									loading={null}
									width={documentWrapperRef.current?.getBoundingClientRect().width || undefined}
								/>
							))}
						</Document>
					</div>
				</div>
			</div>
		</dialog>
	);
};