rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match PDF desktop gutter to hero padding

Browse Source 
Fit-to-width at 100% used a phone-sized inset on all
viewports. Use the HeaderBand px-8 gutter on desktop so
the page aligns with the hero; keep mobile unchanged.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-07-20 19:26:03 +02:00
parent 895f484cf2
commit f62cb82387
1 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/compliance-portal/src/pages/documents/_components/PdfPreview.tsx
View File

@@ -37,8 +37,19 @@ import { pdfPreview } from "./variants";
// it from a CDN, so the viewer works under a strict trust-center CSP. // it from a CDN, so the viewer works under a strict trust-center CSP.
pdfjs.GlobalWorkerOptions.workerSrc = workerSrc; pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
// Horizontal inset so pages don't kiss the viewport edge on phones. // Total horizontal inset (both sides) for fit-to-width at 100% zoom.
const PAGE_GUTTER_PX = 32; // Desktop matches HeaderBand / hero `px-8` (32px per side); mobile keeps the
// tighter phone gutter so pages stay readable.
const PAGE_GUTTER_MOBILE_PX = 32;
const PAGE_GUTTER_DESKTOP_PX = 64;
// 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 findCenteredPage( function findCenteredPage(
wrapper: HTMLDivElement, wrapper: HTMLDivElement,
@@ -110,13 +121,19 @@ export function PdfPreview({ file, scale, ref, onNumPages, onVisiblePageChange }
} }
const updateWidth = () => { const updateWidth = () => {
setPageWidth(Math.max(wrapper.clientWidth - PAGE_GUTTER_PX, 1)); setPageWidth(Math.max(wrapper.clientWidth - pageGutterPx(), 1));
}; };
updateWidth(); updateWidth();
const observer = new ResizeObserver(updateWidth); const observer = new ResizeObserver(updateWidth);
observer.observe(wrapper); observer.observe(wrapper);
return () => observer.disconnect(); // Recompute when crossing the md breakpoint so the gutter tracks hero padding.
const media = window.matchMedia(DESKTOP_MEDIA_QUERY);
media.addEventListener("change", updateWidth);
return () => {
observer.disconnect();
media.removeEventListener("change", updateWidth);
};
}, []); }, []);
// After fit-to-width / zoom reflow, the same scroll offset can center a // After fit-to-width / zoom reflow, the same scroll offset can center a