From 55f05280bf066a616629b2a5a571559d5a777624 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 27 Jul 2026 18:18:15 +0000
Subject: [PATCH] Scale published resumes to the viewport width

The published resume page rendered the sheet at its natural 8.5in width, so
on a desktop viewport the CV sat small in the middle of the page and readers
had to zoom in.

Wrap the desktop sheet in a stage that measures the width available to it and
scales the page up to fill it, capped at twice the page width so the type
stays sane on ultrawide displays. A CSS breakpoint ladder supplies a close
approximation before hydration (and when JavaScript is unavailable), and the
measured value takes over once the stage is observed.

The footer actions now share the same column as the sheet instead of a fixed
816px, so the PDF link stays aligned with the page edge at every width. Print
output is unchanged: the print stylesheet already resets the sheet transform
and the paper frame back to natural size.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01M7fKRZGJ2XH6E4AXktKRzN
---
 .../public-resume-footer-actions.tsx          |  9 +--
 .../_components/public-resume-renderer.tsx    | 10 ++-
 src/app/_components/public-resume-stage.tsx   | 80 +++++++++++++++++++
 src/app/globals.css                           | 63 +++++++++++++++
 4 files changed, 153 insertions(+), 9 deletions(-)
 create mode 100644 src/app/_components/public-resume-stage.tsx

diff --git a/src/app/_components/public-resume-footer-actions.tsx b/src/app/_components/public-resume-footer-actions.tsx
index 27db508..dbdb956 100644
--- a/src/app/_components/public-resume-footer-actions.tsx
+++ b/src/app/_components/public-resume-footer-actions.tsx
@@ -1,15 +1,14 @@
 "use client";
 
 import { DownloadIcon } from "@/app/_components/cv-studio-ui";
+import { publicResumeColumnClass } from "@/app/_components/public-resume-stage";
 import { downloadPdfFromUrl } from "@/app/_lib/pdf-download-client";
 import { buildResumePdfDownloadUrl } from "@/app/_lib/resume-print-url";
 import Link from "next/link";
 
 export function PublicResumeFooterActions({
-  pageWidth,
   showBranding,
 }: {
-  pageWidth: number;
   showBranding: boolean;
 }) {
   const handleDownloadPdf = async () => {
@@ -28,8 +27,7 @@ export function PublicResumeFooterActions({
   if (!showBranding) {
     return (
       <footer
-        className="app-chrome mx-auto mt-4 flex w-full items-center justify-end pb-2 lg:mt-5 lg:pb-0 print:hidden"
-        style={{ maxWidth: `${pageWidth}px` }}
+        className={`app-chrome ${publicResumeColumnClass} mt-4 flex items-center justify-end pb-2 lg:mt-5 lg:pb-0 print:hidden`}
       >
         <button
           className="inline-flex min-h-11 min-w-11 cursor-pointer items-center justify-center gap-1.5 text-[0.82rem] font-medium text-slate-600 underline-offset-4 transition hover:text-slate-950 hover:underline sm:min-h-0 sm:min-w-0"
@@ -45,8 +43,7 @@ export function PublicResumeFooterActions({
 
   return (
     <footer
-      className="app-chrome mx-auto mt-4 flex w-full flex-col gap-2 pb-2 text-left sm:flex-row sm:items-center sm:justify-between lg:mt-5 lg:pb-0 print:hidden"
-      style={{ maxWidth: `${pageWidth}px` }}
+      className={`app-chrome ${publicResumeColumnClass} mt-4 flex flex-col gap-2 pb-2 text-left sm:flex-row sm:items-center sm:justify-between lg:mt-5 lg:pb-0 print:hidden`}
     >
       <p className="text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-slate-500">
         Published with Tiny CV
diff --git a/src/app/_components/public-resume-renderer.tsx b/src/app/_components/public-resume-renderer.tsx
index 98fd884..61d3921 100644
--- a/src/app/_components/public-resume-renderer.tsx
+++ b/src/app/_components/public-resume-renderer.tsx
@@ -1,4 +1,5 @@
 import { PublicResumeFooterActions } from "@/app/_components/public-resume-footer-actions";
+import { PublicResumeDesktopStage } from "@/app/_components/public-resume-stage";
 import { ResumeDesktopSheet, ResumeMobileSheet } from "@/app/_components/resume-live-document";
 import { ResumePrintView } from "@/app/_components/resume-print-view";
 import { getPageMetrics } from "@/app/_lib/cv-fit";
@@ -31,11 +32,14 @@ export async function PublicResumeRenderer({
           <ResumeMobileSheet document={document} />
         </div>
 
-        <div className="public-resume-desktop hidden flex-1 items-start justify-center lg:flex">
+        <PublicResumeDesktopStage
+          pageHeight={pageMetrics.pageHeight}
+          pageWidth={pageMetrics.pageWidth}
+        >
           <ResumeDesktopSheet document={document} fitScale={resume.fitScale} />
-        </div>
+        </PublicResumeDesktopStage>
 
-        <PublicResumeFooterActions pageWidth={pageMetrics.pageWidth} showBranding={!hideBranding} />
+        <PublicResumeFooterActions showBranding={!hideBranding} />
       </div>
 
       <style media="print">{`@page { size: ${document.style.pageSize}; margin: 0; }`}</style>
diff --git a/src/app/_components/public-resume-stage.tsx b/src/app/_components/public-resume-stage.tsx
new file mode 100644
index 0000000..db0675e
--- /dev/null
+++ b/src/app/_components/public-resume-stage.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import {
+  type CSSProperties,
+  type ReactNode,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+
+/**
+ * Shared column for the public resume sheet and the actions underneath it so the
+ * two stay aligned at every width. The 102rem cap is twice the 8.5in page width,
+ * which is how far the sheet is allowed to scale up on very wide displays.
+ */
+export const publicResumeColumnClass = "mx-auto w-full max-w-[102rem]";
+
+export function PublicResumeDesktopStage({
+  children,
+  pageHeight,
+  pageWidth,
+}: {
+  children: ReactNode;
+  pageHeight: number;
+  pageWidth: number;
+}) {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const [stageScale, setStageScale] = useState<number | null>(null);
+
+  useLayoutEffect(() => {
+    const stage = stageRef.current;
+
+    if (!stage) {
+      return;
+    }
+
+    const updateStageScale = () => {
+      const availableWidth = stage.clientWidth;
+
+      if (availableWidth <= 0) {
+        return;
+      }
+
+      // Round down so the scaled sheet never overflows the stage by a subpixel.
+      const nextScale = Math.floor((availableWidth / pageWidth) * 1000) / 1000;
+
+      setStageScale((current) => (current === nextScale ? current : nextScale));
+    };
+
+    updateStageScale();
+
+    const observer = new ResizeObserver(() => {
+      window.requestAnimationFrame(updateStageScale);
+    });
+
+    observer.observe(stage);
+
+    return () => observer.disconnect();
+  }, [pageWidth]);
+
+  return (
+    <div
+      className={`public-resume-desktop ${publicResumeColumnClass} hidden flex-1 items-start justify-center lg:flex`}
+      ref={stageRef}
+    >
+      <div
+        className="cv-paper-frame cv-scaled-frame"
+        style={{
+          height: `calc(${pageHeight}px * var(--cv-stage-scale))`,
+          width: `calc(${pageWidth}px * var(--cv-stage-scale))`,
+          // Before hydration the scale comes from the CSS breakpoint ladder in
+          // globals.css; the measured value takes over once it is known.
+          ...(stageScale === null ? null : { "--cv-stage-scale": stageScale }),
+        } as CSSProperties}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 0d1a92d..fa0198f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -88,6 +88,68 @@ textarea {
   overflow: hidden;
 }
 
+/*
+ * A frame that renders a full-size page scaled to the width it is given, so the
+ * published resume grows with the viewport instead of sitting at 8.5in.
+ */
+.cv-scaled-frame {
+  --cv-stage-scale: 1;
+}
+
+.cv-scaled-frame > .cv-sheet {
+  transform: scale(var(--cv-stage-scale));
+  transform-origin: top left;
+}
+
+/*
+ * Pre-hydration approximation of the width PublicResumeDesktopStage measures,
+ * so the sheet lands close to its final size on first paint (and still scales
+ * without JavaScript). Every step stays a little under the exact
+ * viewport-derived scale, leaving room for a scrollbar, so the sheet can never
+ * overflow its stage before the measured value takes over.
+ */
+@media (min-width: 1024px) {
+  .cv-scaled-frame {
+    --cv-stage-scale: 1.15;
+  }
+}
+
+@media (min-width: 1152px) {
+  .cv-scaled-frame {
+    --cv-stage-scale: 1.31;
+  }
+}
+
+@media (min-width: 1280px) {
+  .cv-scaled-frame {
+    --cv-stage-scale: 1.46;
+  }
+}
+
+@media (min-width: 1408px) {
+  .cv-scaled-frame {
+    --cv-stage-scale: 1.62;
+  }
+}
+
+@media (min-width: 1536px) {
+  .cv-scaled-frame {
+    --cv-stage-scale: 1.78;
+  }
+}
+
+@media (min-width: 1664px) {
+  .cv-scaled-frame {
+    --cv-stage-scale: 1.93;
+  }
+}
+
+@media (min-width: 1792px) {
+  .cv-scaled-frame {
+    --cv-stage-scale: 2;
+  }
+}
+
 .cv-document {
   height: 100%;
   position: relative;
@@ -201,6 +263,7 @@ textarea {
     align-items: flex-start !important;
     justify-content: flex-start !important;
     width: auto !important;
+    max-width: none !important;
     min-height: 0 !important;
   }