fix: tune playground preview heights and embedded iframe layout IX-4305

[alexkaduk]

💡 What is the current behavior?

On component Code pages, inline Playground previews often clip demo content or show unwanted vertical scroll inside the iframe:

• Many height="Xrem" values were too small for content at the docs column width (e.g. flip tiles wrapping into multiple rows, layout-grid body scroll exceeding IX bounding boxes).
• Five inline <Playground> blocks in modal/code.mdx used height={props.height}, which is undefined outside autogenerated playground MDX — previews fell back to the browser default iframe height (~150px).
• Bundled demo assets set html/body to 100vh, causing spurious overflow/scrolling in embedded previews.

🆕 What is the new behavior?

• Playground: on iframe load (and after ixInitPromise), normalize the embedded document — reset html/body to height: auto, clear forced inline overflow, set body min-height: 0. If an MDX height is too small, content remains reachable via iframe scroll instead of silent clipping.
• MDX heights tuned across 22 component docs (code + overview) so previews fit content at 100% zoom without clipping or unnecessary scroll, including:
  • flip 35rem → 50rem
  • card-list 55rem → 58rem
  • layout-grid Basic/Size/Padding → 16rem / 28.5rem / 24.5rem
  • modal inline examples: height={props.height} → 15rem (room for opened modal)
  • Adjustments to pickers, dropdowns, charts, progress-indicator, input variants, etc.
• Manually QA'd overlay examples (dropdown, select, date/time pickers, modals, tooltips, toasts) and spot-checked Tier 2/3 pages.

Test plan

• pnpm start.docs — spot-check updated pages at 100% zoom
• Verify no bottom clipping on flip, layout-grid, card-list, modal (button + opened modal)
• Verify overlay examples: open dropdown/calendar/modal inside preview; scroll inside iframe if needed
• Confirm modal custom examples use explicit 15rem, not props.height
• CI / build green

👨‍💻 Help & support

Summary by CodeRabbit

• Documentation

  • Updated embedded playground display heights across many component docs to improve consistency and layout.
  • Adjusted the modal/iframe presentation used in documentation previews for more stable, predictable sizing (including reduced unintended scrolling).

• Chores

  • Added documentation environment settings to the pull request config to support consistent docs branch/PR metadata during preview/publishing.

[netlify]

✅ Deploy Preview for industrial-experience ready!

Name	Link
🔨 Latest commit	5592dd8
🔍 Latest deploy log	https://app.netlify.com/projects/industrial-experience/deploys/6a477544c3225c0008e63472
😎 Deploy Preview	https://deploy-preview-252--industrial-experience.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 705b4be0-8502-497b-bc21-c733a9021cac

📥 Commits

Reviewing files that changed from the base of the PR and between ffe9bc4 and 5592dd8.

📒 Files selected for processing (4)

• docs/components/3d/overview.mdx
• docs/components/bar-chart/overview.mdx
• docs/components/gauge-chart/overview.mdx
• docs/components/line-chart/overview.mdx

✅ Files skipped from review due to trivial changes (1)

• docs/components/3d/overview.mdx

🚧 Files skipped from review as they are similar to previous changes (3)

• docs/components/bar-chart/overview.mdx
• docs/components/gauge-chart/overview.mdx
• docs/components/line-chart/overview.mdx

---

📝 Walkthrough

Walkthrough

Adds iframe load-time normalization in Playground, removes iframe overflow styling, and updates embedded playground heights across documentation pages. The pullrequest env file also gains DOCS_BRANCH, DOCS_BRANCH_TYPE, and DOCS_PR_NUMBER.

Changes

Playground iframe normalization and doc height corrections

Layer / File(s)	Summary
Playground iframe normalization logic and CSS fix src/components/Playground/index.tsx, src/components/Playground/styles.module.css	Adds normalizeEmbeddedPreviewDocument, wires it to iframe onLoad, re-applies normalization after optional ixInitPromise, and removes overflow: auto from the iframe styles.
Documentation playground height updates docs/components/*/code.mdx, docs/components/*/overview.mdx, .env.pullrequest	Updates playground embed heights across the docs pages, adjusts nearby MDX structure where needed, switches modal examples to fixed 15rem heights, and adds the three DOCS_* env vars.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the PR’s main focus on fixing playground preview heights and embedded iframe layout.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/IX-4305

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[gemini-code-assist]

Code Review

This pull request adjusts the heights of various playground components across multiple documentation files and introduces a helper function, normalizeEmbeddedPreviewDocument, to normalize the styles of embedded preview documents within the Playground component. The reviewer suggests adding a defensive check in the apply callback to ensure doc.documentElement exists before accessing its style property to prevent potential runtime errors.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.