fix: PDF display does not correctly scale on ombile (#12608)

app/editor/menus/block.tsx

@@ -124,8 +124,6 @@ export default function blockMenuItems(
       keywords: "pdf upload attach",
       attrs: {
         accept: "application/pdf",
-        width: 300,
-        height: 424,
         preview: true,
       },
     },

shared/editor/components/PDF.tsx

@@ -9,6 +9,13 @@ import { s } from "../../styles";
 import { Preview, Subtitle, Title } from "./Widget";
 import { EditorStyleHelper } from "../styles/EditorStyleHelper";
 
+/**
+ * Default dimensions for the PDF preview – approximately the width of a standard
+ * document with an A4 portrait aspect ratio.
+ */
+const naturalWidth = 768;
+const naturalHeight = 1086;
+
 type Props = ComponentProps & {
   /** Icon to display on the left side of the widget */
   icon: React.ReactNode;
@@ -27,16 +34,14 @@ export default function PdfViewer(props: Props) {
   const embedRef = useRef<HTMLEmbedElement>(null);
   const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
 
-  const { width, height, setSize, handlePointerDown, dragging } = useDragResize(
-    {
+  const { width, setSize, handlePointerDown, dragging } = useDragResize({
     width: node.attrs.width,
     height: node.attrs.height,
-      naturalWidth: 300,
-      naturalHeight: 424,
+    naturalWidth,
+    naturalHeight,
     onChangeSize,
     ref,
-    }
-  );
+  });
 
   useEffect(() => {
     if (node.attrs.width && node.attrs.width !== width) {
@@ -96,7 +101,7 @@ export default function PdfViewer(props: Props) {
           ? "pdf-wrapper ProseMirror-selectednode"
           : "pdf-wrapper"
       }
-      style={{ width: width ?? "auto" }}
+      style={{ width: width ?? "100%" }}
       $dragging={dragging}
     >
       <Flex gap={6} align="center">
@@ -110,12 +115,10 @@ export default function PdfViewer(props: Props) {
         title={name}
         src={href}
         ref={embedRef}
-        width={
-          // subtract padding and borders from width
-          width - 24
-        }
-        height={height}
         style={{
+          width: "100%",
+          height: "auto",
+          aspectRatio: `${naturalWidth} / ${naturalHeight}`,
           pointerEvents:
             !isEditable || (isSelected && !dragging) ? "initial" : "none",
           marginTop: 6,
@@ -153,6 +156,8 @@ const PDFWrapper = styled.div<{ $dragging: boolean }>`
   padding: ${EditorStyleHelper.blockRadius};
 
   embed {
+    display: block;
+    max-width: 100%;
     transition-property: width, height;
     transition-duration: ${(props) => (props.$dragging ? "0ms" : "120ms")};
     transition-timing-function: ease-in-out;

shared/editor/components/Styles.ts

@@ -822,31 +822,6 @@ iframe.embed {
   }
 }
 
-.pdf {
-  position: relative;
-  width: max-content;
-  height: max-content;
-  margin-right: auto;
-  margin-left: auto;
-  max-width: 100%;
-  clear: both;
-  z-index: 1;
-  transition-property: width, height;
-  transition-duration: 80ms;
-  transition-timing-function: ease-in-out;
-
-  embed {
-    display: block;
-    max-width: 100%;
-    contain: strict,
-    content-visibility: auto,
-    backface-visibility: hidden,
-    transition-property: width, height;
-    transition-duration: 80ms;
-    transition-timing-function: ease-in-out;
-  }
-}
-
 .image-replacement-uploading {
   img {
     opacity: 0.5;

shared/editor/components/hooks/useDragResize.ts

@@ -192,7 +192,9 @@ export default function useDragResize(props: Params): ReturnValue {
         : Infinity;
       setMaxWidth(max);
       setSizeAtDragStart({
-        width: constrainWidth(size.width, max),
+        // When no width has been set yet the element is displayed at full width,
+        // so begin resizing from the maximum width rather than the minimum.
+        width: constrainWidth(size.width || max, max),
         height: size.height,
       });
       setOffset(