Manager: Restore Docs canvas full height in Firefox ESR

[HumphreySun98]

Closes #33743

What I did

PR #33290 (Viewports tool redesign) changed CanvasWrap in code/core/src/manager/components/preview/utils/components.ts from width/height: 100% to minWidth/minHeight: 100%. Firefox ESR 140.7+ does not resolve min-height: 100% on a display: grid element the same way Chromium does, so since Storybook 10.2.x the Docs canvas collapses to ~100px in Firefox ESR and the preview becomes unusable.

This change replaces the two min-* values with explicit width/height: 100%, matching the sibling IframeWrapper in the same file (which has always used width/height: 100% for the same grid-container purpose). The reporter (@mihkeleidast) isolated the same lines in their bisect comment.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories — covered by the existing Viewport.stories.tsx added in Core: Redesign and refactor Viewports tool #33290
• unit tests
• integration tests
• end-to-end tests

No additional test was added because this is a CSS-only revert; the existing visual-regression pipeline (Chromatic) should catch any layout regression on other browsers.

Manual testing

Note: I do not have Firefox ESR locally. I verified the root cause by reading the bisect in #33743 and the diff in #33290; visual confirmation in Firefox ESR will need to happen via Storybook's Chromatic pipeline or a maintainer with FF ESR access.

1. From next, run a Storybook sandbox:

   yarn task --task sandbox --start-from auto --template react-vite/default-ts

2. Open the running Storybook in Firefox ESR 140.7+ (or any Firefox that reproduces the issue from [Bug]: Docs page not full height in Firefox ESR (140.7esr) after 10.2.x update #33743). With this PR applied, the Docs canvas should render at full height. Without it, the canvas collapses to ~100px and is vertically centered.
3. Open the same Storybook in Chromium and the latest Firefox. The canvas should render identically to current next (no visual regression on browsers that were not affected).

Documentation

• Add or update documentation reflecting your changes — N/A, internal CSS fix
• If you are deprecating/removing a feature, make sure to update MIGRATION.MD — N/A

Suggested label: bug.

Summary by CodeRabbit

• Bug Fixes
  • Fixed an issue where the documentation preview could collapse in Firefox, restoring correct preview layout and sizing so docs display reliably across browsers.

[github-actions]

	Fails
🚫	PR is not labeled with one of: ["cleanup","BREAKING CHANGE","feature request","bug","documentation","maintenance","build","dependencies"]
🚫	PR is not labeled with one of: ["ci:normal","ci:merged","ci:daily","ci:docs"]
🚫	PR is not labeled with one of: ["qa:needed","qa:skip","qa:success"]

Generated by 🚫 dangerJS against efe089f

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5000abe5-ef4a-4bbf-ba01-c8f26117b905

📥 Commits

Reviewing files that changed from the base of the PR and between 0e1c16d and efe089f.

📒 Files selected for processing (1)

• code/core/src/manager/components/preview/utils/components.ts

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

• code/core/src/manager/components/preview/utils/components.ts

---

📝 Walkthrough

Walkthrough

The CanvasWrap grid container in preview utils now sets explicit width: '100%' and height: '100%' (replacing minWidth/minHeight) with comments documenting a Firefox ESR sizing workaround.

Changes

Preview Grid Sizing

Layer / File(s)	Summary
Grid container sizing for Firefox ESR code/core/src/manager/components/preview/utils/components.ts	CanvasWrap replaced minWidth: '100%' / minHeight: '100%' with explicit width: '100%' / height: '100%' and added Firefox ESR-specific comments.

🎯 2 (Simple) | ⏱️ ~10 minutes

---

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 and usage tips.}

[HumphreySun98]

Thanks Danger! Fixed the title format. I can't add the labels myself as a first-time contributor — could a maintainer please add:

• bug (this is a regression fix from Core: Redesign and refactor Viewports tool #33290)
• one of ci:normal / ci:merged / ci:daily / ci:docs (probably ci:normal)
• one of qa:needed / qa:skip / qa:success (qa:needed if a maintainer with Firefox ESR can spot-check, otherwise this CSS revert is safe to gate behind Chromatic)

Happy to address any review feedback. Thanks!

[Sidnioulz]

Thanks for your PR @HumphreySun98! Unfortunately, #35056 was open just before yours to address the same issue with the same fix. To limit the cost of review, we'll close this PR as duplicate. Feel free to pick another issue to work on though! Thanks for your understanding.