diff --git a/apps/compliance-portal/src/pages/documents/_components/PdfPreview.tsx b/apps/compliance-portal/src/pages/documents/_components/PdfPreview.tsx
index fae12b602..83b94d647 100644
--- a/apps/compliance-portal/src/pages/documents/_components/PdfPreview.tsx
+++ b/apps/compliance-portal/src/pages/documents/_components/PdfPreview.tsx
@@ -37,18 +37,22 @@ import { pdfPreview } from "./variants";
 // it from a CDN, so the viewer works under a strict trust-center CSP.
 pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
 
-// Total horizontal inset (both sides) for fit-to-width at 100% zoom.
-// Desktop matches HeaderBand / hero `px-8` (32px per side); mobile keeps the
-// tighter phone gutter so pages stay readable.
+// Fit-to-width at 100% zoom: mobile keeps a tight phone gutter; desktop pages
+// match HeaderBand's inner column (`px-8` + centered `max-w-5xl`).
 const PAGE_GUTTER_MOBILE_PX = 32;
-const PAGE_GUTTER_DESKTOP_PX = 64;
+const HEADER_PAD_DESKTOP_PX = 32; // Tailwind `px-8` per side
+const HEADER_CONTENT_MAX_PX = 1024; // Tailwind `max-w-5xl`
 // Tailwind `md` — same breakpoint as `max-md:px-4` on the hero band.
 const DESKTOP_MEDIA_QUERY = "(min-width: 768px)";
 
-function pageGutterPx(): number {
-  return window.matchMedia(DESKTOP_MEDIA_QUERY).matches
-    ? PAGE_GUTTER_DESKTOP_PX
-    : PAGE_GUTTER_MOBILE_PX;
+function pageWidthForWrapper(clientWidth: number): number {
+  if (!window.matchMedia(DESKTOP_MEDIA_QUERY).matches) {
+    return Math.max(clientWidth - PAGE_GUTTER_MOBILE_PX, 1);
+  }
+  return Math.max(
+    Math.min(clientWidth - HEADER_PAD_DESKTOP_PX * 2, HEADER_CONTENT_MAX_PX),
+    1,
+  );
 }
 
 function findCenteredPage(
@@ -121,13 +125,13 @@ export function PdfPreview({ file, scale, ref, onNumPages, onVisiblePageChange }
     }
 
     const updateWidth = () => {
-      setPageWidth(Math.max(wrapper.clientWidth - pageGutterPx(), 1));
+      setPageWidth(pageWidthForWrapper(wrapper.clientWidth));
     };
 
     updateWidth();
     const observer = new ResizeObserver(updateWidth);
     observer.observe(wrapper);
-    // Recompute when crossing the md breakpoint so the gutter tracks hero padding.
+    // Recompute when crossing the md breakpoint so width tracks HeaderBand.
     const media = window.matchMedia(DESKTOP_MEDIA_QUERY);
     media.addEventListener("change", updateWidth);
     return () => {