fix(storybook): screenshots cut off horizontally in Vitest integration#336
Merged
Conversation
…test Renders fixed-width content wider than the viewport with `fitToContent`. Without the fix, the screenshot is cut horizontally: the content is only painted up to the viewport width and the rest of the canvas is blank. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Follow-up to the vertical fix. `fitToContent` fits the content in both dimensions, but the iframe was only grown vertically, so content wider than the viewport was left unpainted (a blank area on the right of the screenshot). Grow the iframe width too when `fitToContent` is enabled. Without `fitToContent` the viewport width is kept, matching Playwright's `fullPage` semantics (full height, viewport width). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Problem
Follow-up to #335 (which fixed vertical clipping). The same iframe-clipping issue also happens horizontally.
The story renders inside an
<iframe data-vitest="true">and Argos screenshots the iframe's<body>. WithfitToContent, the content is fit in both dimensions (width: fit-content; zoom), but the iframe was only grown vertically. Content wider than the viewport therefore overflows the iframe's width and is left unpainted — the screenshot ends up with a large blank area on the right.This PR (step 1 — repro only)
Adds a
Repro/WideContentstory: fixed-width content (2400px) wider than the viewport, withfitToContent. Onmainthis produces a screenshot whose canvas is the full content width but only the leftmost ~viewport-width is painted (rest blank). The fix is pushed as a follow-up commit so the Argos diff demonstrates the screenshot going from cut → complete.Note: the non-
fitToContent(fullPage) case intentionally keeps viewport width, matching Playwright'sfullPagesemantics (full height, viewport width), so it is out of scope here.🤖 Generated with Claude Code