Skip to content

fix(stories): drop iframe body styles causing expanding docs preview#221

Open
jsakamoto wants to merge 1 commit into
IgniteUI:masterfrom
jsakamoto:jsakamoto/fix/story/iframe-body-style-overflow
Open

fix(stories): drop iframe body styles causing expanding docs preview#221
jsakamoto wants to merge 1 commit into
IgniteUI:masterfrom
jsakamoto:jsakamoto/fix/story/iframe-body-style-overflow

Conversation

@jsakamoto
Copy link
Copy Markdown

Description

Remove margin, padding, and min-height styles from the <body> element in IFramePage.razor to fix the ever-growing preview window height in the Blazing Story Docs page.

Motivation / Context

Blazing Story v1.0.0-preview.81 resolved unpredictable zoom behavior in preview frames as part of its layout mechanism improvements. With that fix in place, the min-height: calc(100vh - 32px) style that had been applied to the <body> element of the iframe page became unnecessary and started causing a new problem.

Because the iframe's own height expanded to match the content height, which in turn was set to 100vh of that iframe, this created a feedback loop that kept stretching the story preview window taller on every render cycle, especially noticeable on the Docs page.

This PR removes the margin, padding, and min-height properties from the <body> inline style to align with the layout behavior introduced in Blazing Story v1.0.0-preview.81, and allows the preview to size itself naturally based on its actual content.

Type of Change (check all that apply):

  • Bug fix
  • New functionality
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Refactoring (no functional changes)
  • Documentation
  • Demos
  • CI/CD
  • Tests
  • Changelog

Component(s) / Area(s) Affected:

Blazing Story / Stories iframe page (IFramePage.razor)

How Has This Been Tested?

Opened the Blazing Story Docs page and confirmed that the story preview window no longer grows beyond the expected height.

  • Unit tests
  • Manual testing
  • Automated e2e tests

Test Configuration:

  • .NET version: .NET 10
  • Hosting model: Blazor Server (InteractiveServer)
  • Browser(s): Microsoft Edge 148.0.3967.96
  • OS: Windows

Screenshots / Recordings

image

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code
  • This PR includes API docs for newly added methods/properties
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes behavioral changes and the feature specification has been updated with them
  • Accessibility (ARIA, keyboard navigation, focus management) has been verified

Copilot AI review requested due to automatic review settings June 4, 2026 23:42
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes an iframe layout feedback loop in the Blazing Story Docs preview by removing <body> inline styles in IFramePage.razor that forced a viewport-based minimum height (and added spacing), which could cause the preview frame to grow on successive renders.

Changes:

  • Removed min-height: calc(100vh - 32px) from the iframe page <body> to prevent height self-amplification.
  • Removed <body> margin and padding inline styles so the iframe can size naturally based on content.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants