4 files changed, 24 insertions, 8 deletions
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 2e4c87d38..37807e818 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -267,8 +267,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @action
     loaded = (nw: number, nh: number, np: number) => {
         this.dataDoc[this._props.fieldKey + '_numPages'] = np;
-        Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), (nw * 96) / 72));
-        Doc.SetNativeHeight(this.dataDoc, (nh * 96) / 72);
+        Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), nw * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS));
+        Doc.SetNativeHeight(this.dataDoc, nh * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS);
         this.layoutDoc._height = NumCast(this.layoutDoc._width) / (Doc.NativeAspect(this.dataDoc) || 1);
         !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (nh / nw));
     };
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 9ba4f8ead..ffeb574e9 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -202,8 +202,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             () => this.layoutDoc._layout_autoHeight,
             layoutAutoHeight => {
                 if (layoutAutoHeight) {
-                    this.layoutDoc._nativeHeight = NumCast(this.Document[this._props.fieldKey + '_nativeHeight']);
-                    this._props.setHeight?.(NumCast(this.Document[this._props.fieldKey + '_nativeHeight']) * (this._props.NativeDimScaling?.() || 1));
+                    const nh = NumCast(this.Document[this._props.fieldKey + '_nativeHeight'], NumCast(this.Document.nativeHeight));
+                    this.layoutDoc._nativeHeight = nh;
+                    this._props.setHeight?.(nh * (this._props.NativeDimScaling?.() || 1));
                 }
             }
         );
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;
         });
     };