2 files changed, 19 insertions, 4 deletions
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index a225c4b59..030251762 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -7,6 +7,10 @@
     left: 0;
 }
 
+:root {
+    --devicePixelRatio: 1; // the actual value of this will be set in PDFViewer.tsx;
+}
+
 .pdfViewerDash,
 .pdfViewerDash-interactive {
     position: absolute;
@@ -19,9 +23,16 @@
     overflow-x: hidden;
     transform-origin: top left;
 
+    .annotationLayer {
+        transform: scale(var(--devicePixelRatio));
+    }
     .textLayer {
         opacity: unset;
         mix-blend-mode: multiply; // bcz: makes text fuzzy!
+        transform: scale(var(--devicePixelRatio));
+    }
+    [data-main-rotation='90'] {
+        transform: scale(var(--devicePixelRatio)) rotate(90deg) translateY(-100%);
     }
     .textLayer ::selection {
         background: #accef76a;
@@ -39,6 +50,7 @@
     .page {
         position: relative;
         border: unset;
+        height: 100% !important;
     }
 
     .pdfViewerDash-text-selected {
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 920c9ea8b..5594254b3 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -152,17 +152,20 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
     initialLoad = async () => {
         if (this._pageSizes.length === 0) {
             this._pageSizes = Array<{ width: number; height: number }>(this._props.pdf.numPages);
+            const devicePixelRatio = window.devicePixelRatio;
+            document.documentElement?.style.setProperty('--devicePixelRatio', devicePixelRatio.toString()); // set so that css can use this to adjust various PDFJs divs
             await Promise.all(
                 this._pageSizes.map((val, i) =>
                     this._props.pdf.getPage(i + 1).then(
                         action((page: Pdfjs.PDFPageProxy) => {
                             const page0or180 = page.rotate === 0 || page.rotate === 180;
                             this._pageSizes.splice(i, 1, {
-                                width: page.view[page0or180 ? 2 : 3] - page.view[page0or180 ? 0 : 1],
-                                height: page.view[page0or180 ? 3 : 2] - page.view[page0or180 ? 1 : 0],
+                                width: page.view[page0or180 ? 2 : 3] * devicePixelRatio - page.view[page0or180 ? 0 : 1] * devicePixelRatio,
+                                height: page.view[page0or180 ? 3 : 2] * devicePixelRatio - page.view[page0or180 ? 1 : 0] * devicePixelRatio,
                             });
                             if (i === this._props.pdf.numPages - 1) {
-                                this._props.loaded?.(page.view[page0or180 ? 2 : 3] - page.view[page0or180 ? 0 : 1], page.view[page0or180 ? 3 : 2] - page.view[page0or180 ? 1 : 0], this._props.pdf.numPages);
+                                const lastPage = this._pageSizes.lastElement();
+                                this._props.loaded?.(lastPage.width, lastPage.height, this._props.pdf.numPages);
                             }
                         })
                     )
@@ -170,7 +173,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
             );
         }
         runInAction(() => {
-            this._scrollHeight = (this._pageSizes.reduce((size, page) => size + page.height, 0) * 96) / 72;
+            this._scrollHeight = this._pageSizes.reduce((size, page) => size + page.height, 0) * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS;
         });
     };