Uh oh!
There was an error while loading. Please reload this page.
Restore the iframe heights docs stories lost in the CSF migration - #2420
Merged
Conversation
Every non-inline story on a docs page renders in a 100px iframe, so the examples are clipped and scroll internally instead of sizing to their content. The `.stories.mdx` files set a per-story height on the docs block: <Story name="Basic" height="400px"> The CSF3 migration in #2405 did not carry that across. Thirty stories in thirteen files lost their height and fell back to Storybook's 100px default. One, Illustrations, was translated but to `docs.story.height`, which is not a parameter Storybook recognises, so it had no effect either. Storybook 10 spells this `parameters.docs.story.iframeHeight`. The values here are the ones the `.stories.mdx` files used, recovered from the commit before #2405, so this restores the previous rendering rather than picking new numbers. Two notes: - `inline: false` is left alone. Some of those stories disable inline rendering for a reason that is now obsolete -- the `html-to-react` bug #2405 removed -- but others do it so media queries resolve against the example's own viewport, which is still valid. Sorting out which is which is its own change; this only fixes the height. - The Illustrations parameter is removed rather than corrected. That story has never disabled inline rendering, so it has no iframe to size, and it renders at full height already. A valid-looking parameter that does nothing is worse than none.
✅ Deploy Preview for cloudfour-patterns ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Uh oh!
There was an error while loading. Please reload this page.
This was referenced Aug 21, 2026
Closed
spaceninja added a commit
that referenced
this pull request
Aug 24, 2026
The pre-#2405 MDX set `inline={false}` on this story and the CSF migration did not carry it across -- the only `inline` attribute in the whole of the old MDX, and the one genuine drop the #2428 sweep found. No `iframeHeight` alongside it, matching the original: the component measures ~45px against Storybook's 100px default, so this cannot reproduce the clipping #2420 fixed. Part of #2428
6 tasks
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 freeto 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.
Overview
On docs pages, every story that renders in an iframe is clipped to 100px and scrolls
internally instead of sizing to its content — cards cut in half, text cut mid-sentence.
It affects thirty stories across thirteen files.
The
.stories.mdxfiles set a per-story height on the docs block:The CSF3 migration in #2405 did not carry that across, so those stories fall back to
Storybook's 100px default. One of them, Illustrations, was translated — but to
docs.story.height, which is not a parameter Storybook recognises, so it had no effecteither. Storybook 10 spells this
parameters.docs.story.iframeHeight.The values in this PR are the ones the
.stories.mdxfiles used, recovered from thecommit before #2405. This restores the previous rendering rather than picking new numbers.
Two things deliberately left alone:
inline: falseis untouched.Dependency modernization: Node 24, Vite, and Storybook 10 #2391 lists revisiting those as a follow-up, and itstill wants doing — but it is a separate question. Some of these stories disable inline
rendering for a reason that is now obsolete (the
html-to-reactbug Upgrade to Storybook 10 + Vite, and Twing 7 #2405 removed),while others do it so media queries resolve against the example's own viewport, which is
still valid. Telling those apart changes rendering behaviour; this PR only fixes height.
disabled inline rendering, so it has no iframe to size, and it already renders at full
height. A valid-looking parameter that does nothing is worse than no parameter.
No changeset: only
*.stories.jsfiles change, and those are not inpackage.json'sfilesarray, so nothing published is affected.Screenshots
Testing
Run
nvm usefirst — this needs Node 24.19.0. Thennpm ciandnpm start.The quickest way to see the problem is to compare against
the current deploy of
main, where each ofthese examples is a short scrolling box.
Columns) should each show their cards in full, with no internal scrollbar and
nothing cut off.
should be fully visible too.
full example.
library; each should show the whole navigation without scrolling inside its box.
Group → Docs, Objects → List → Docs and Objects → Feature Group → Docs.
Same expectation on each.
Textarea example).
should render at full height, as it does today — this one is not iframed, and the
only change is removing a parameter that did nothing.
→ Columns, change the columns slider and confirm the layout updates within the
example.