React-pdf: Адаптивный PDF со слоем аннотаций

• [x] Я прочитал документацию в README
• [x] Я проверил образцы и тестовые наборы, чтобы увидеть реальную базовую реализацию.
• [x] Я проверил, не задавался ли еще этот вопрос

Чего я пытаюсь достичь?

Я хочу, чтобы PDF-документ уменьшался по мере уменьшения размера экрана, чтобы все выглядело хорошо на мобильных устройствах, при этом сохраняя слой аннотаций для интерактивных ссылок.

Опишите решения, которые я пробовал

У меня почти та же проблема, что и у этой нерешенной проблемы: https://github.com/wojtekmaj/react-pdf/issues/339 , я пробовал его решение и несколько других, но безрезультатно. Я могу уменьшить масштаб страницы документа, но слой аннотаций не уменьшается вместе со страницей.

Я не вижу ничего, что работает с моей настройкой, мне что-то не хватает, чтобы слой аннотаций также реагировал?

Мой текущий код:
_pdf.css: _

.react-pdf__Document {
   display: flex !important;
   justify-content: center !important;
}

.react-pdf__Page__canvas, .react-pdf__Page__annotations {
   max-width: 100% !important;
   height: auto !important;
}

.pdf-container {
   background-color: lightgray;
   padding: 1% 0 10px 0;
}

<strong i="22">@media</strong> screen and (min-width: 901px) and (max-width: 1600px) {
   .pdf-container {
      padding: 5% 0 10px 0;
   }
  }

  <strong i="23">@media</strong> screen and (min-width: 701px) and (max-width: 900px) {
   .pdf-container {
      padding: 10% 0 10px 0;
   }
  }

  <strong i="24">@media</strong> screen and (max-width: 700px) {
   .pdf-container {
      padding: 20% 0 10px 0;
   }
  }

_Компонент статьи: _

 <React.Fragment>
    <div className="pdf-container">
        <Document
            file={this.props.article.pdfUrl}
            onLoadSuccess={this.onDocumentLoadSuccess}
        >
            <Page pageNumber={pageNumber} />
        </Document>
        <Grid fluid className="s-padding-t">
            <Row center="xs">
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber <= 1}
                        onClick={this.previousPage}
                        >
                        <i className="fa fa-chevron-left"></i> Previous
                    </button>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <span>Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}</span>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber >= numPages}
                        onClick={this.nextPage}
                        >
                        Next <i className="fa fa-chevron-right"></i>
                    </button>
                </Col>
            </Row>
        </Grid>
    </div>
</React.Fragment>

Среда

• Браузер (если применимо) [например, Chrome 57, Firefox 59]: Chrome 57
• Версия React-PDF: ^ 4.1.0
• Версия React: ^ 16.13.1