Repository navigation
feat: scale published resumes to the viewport width - #83
Merged
Merged
Conversation
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
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 to read it.
Changes
public-resume-stage.tsx(new client component) wraps the desktop sheet, measures the width available to it with aResizeObserver, and drives a--cv-stage-scalecustom property. The page keeps its exact geometry — it is a CSS transform on the same 816x1056 sheet, so line breaks, the stored fit scale, and PDF output are untouched.globals.css: a breakpoint ladder supplies a close approximation of the scale before hydration (and when JavaScript is unavailable); the measured value takes over once the stage is observed. Each step stays just under the exact viewport-derived scale, leaving room for a scrollbar, so the sheet can never overflow its stage.public-resume-footer-actions.tsx: the footer shares the sheet's column instead of a hardcoded 816px, so the PDF link stays aligned with the page edge at every width. ThepageWidthprop is no longer needed.Below 1024px nothing changes — the existing mobile sheet still takes over.
Measured results
Sheet width by viewport width: 1024 -> 960px (1.18x), 1280 -> 1216px (1.49x), 1440 -> 1376px (1.69x), 1920 and up -> 1632px (2x, centered). No horizontal overflow at any width.
Verification
?print=1route is unmodified.pnpm test(108 tests),pnpm lint, the design-readiness check, andpnpm buildall pass.Scaling is driven by width only, so a short-but-wide window still gets the full 2x and more vertical scrolling.
🤖 Generated with Claude Code
https://claude.ai/code/session_01M7fKRZGJ2XH6E4AXktKRzN
Generated by Claude Code