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

Align PDF preview with header content

Browse Source 
Size desktop pages to HeaderBand's max-w-5xl column so
they line up with the title and toolbar. Mobile gutter is
unchanged.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-07-20 19:35:05 +02:00
parent f62cb82387
commit 854b405979
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,18 +37,22 @@ 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;
// Total horizontal inset (both sides) for fit-to-width at 100% zoom. // Fit-to-width at 100% zoom: mobile keeps a tight phone gutter; desktop pages
// Desktop matches HeaderBand / hero `px-8` (32px per side); mobile keeps the // match HeaderBand's inner column (`px-8` + centered `max-w-5xl`).
// tighter phone gutter so pages stay readable.
const PAGE_GUTTER_MOBILE_PX = 32; 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. // Tailwind `md` — same breakpoint as `max-md:px-4` on the hero band.
const DESKTOP_MEDIA_QUERY = "(min-width: 768px)"; const DESKTOP_MEDIA_QUERY = "(min-width: 768px)";
function pageGutterPx(): number { function pageWidthForWrapper(clientWidth: number): number {
return window.matchMedia(DESKTOP_MEDIA_QUERY).matches if (!window.matchMedia(DESKTOP_MEDIA_QUERY).matches) {
? PAGE_GUTTER_DESKTOP_PX return Math.max(clientWidth - PAGE_GUTTER_MOBILE_PX, 1);
: PAGE_GUTTER_MOBILE_PX; }
return Math.max(
Math.min(clientWidth - HEADER_PAD_DESKTOP_PX * 2, HEADER_CONTENT_MAX_PX),
1,
);
} }
function findCenteredPage( function findCenteredPage(
@@ -121,13 +125,13 @@ export function PdfPreview({ file, scale, ref, onNumPages, onVisiblePageChange }
} }
const updateWidth = () => { const updateWidth = () => {
setPageWidth(Math.max(wrapper.clientWidth - pageGutterPx(), 1)); setPageWidth(pageWidthForWrapper(wrapper.clientWidth));
}; };
updateWidth(); updateWidth();
const observer = new ResizeObserver(updateWidth); const observer = new ResizeObserver(updateWidth);
observer.observe(wrapper); 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); const media = window.matchMedia(DESKTOP_MEDIA_QUERY);
media.addEventListener("change", updateWidth); media.addEventListener("change", updateWidth);
return () => { return () => {