fix(storybook): screenshots cut off in Vitest integration#335
Merged
Conversation
Renders content taller than the viewport, both with and without `fitToContent`. Without the fix, the `fitToContent` variant is cut off because the iframe is not grown to fit the zoomed content. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The story renders inside an `<iframe data-vitest="true">` and Argos screenshots the iframe's `<body>`. Content overflowing the iframe box is not painted, so screenshots were cut off. `setViewportSize` grew the iframe before `argosCSS` (which injects `fitToContent`'s `zoom`) was applied, so it could not account for the final content size. Re-fit the iframe height in a `beforeScreenshot` hook, after stabilization has injected `argosCSS`, so the whole content is painted. Grow-only, to avoid collapsing an intentionally sized viewport. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
gregberge
force-pushed
the
fix/vitest-screenshot-cut-off
branch
from
2f0e5c4 to
a73706f
Compare
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
Screenshots taken with the Storybook Vitest integration are cut off when the story content is taller than the browser viewport.
The story renders inside an
<iframe data-vitest="true">on the host page, and Argos screenshots the iframe's<body>. Anything overflowing the iframe's box is never painted, so the screenshot ends up with a large blank area — it looks "cut".setViewportSizegrows the iframe to fit the content, but:fitToContent,fullPageisfalse, so the iframe-growth branch is skipped.argosCSSinjectsfitToContent'szoom: 2, so the iframe ends up sized to the un-zoomed content and the (now 2×-taller) content overflows.This PR (step 1 — repro only)
Adds a
Repro/TallContentstory with tall content, in bothfitToContentand non-fitToContentvariants, so Argos captures the current (cut) baseline. The fix is pushed in a follow-up commit so the Argos diff demonstrates the screenshots going from cut → complete.🤖 Generated with Claude Code