From efe089fdd2ec21db366c15d53759703849ad5fb5 Mon Sep 17 00:00:00 2001 From: Humphrey Sun Date: Thu, 4 Jun 2026 15:28:26 -0500 Subject: [PATCH] fix(manager): restore Docs canvas full height in Firefox ESR MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #33743. PR #33290 changed `CanvasWrap`'s `width/height: 100%` to `minWidth/minHeight: 100%` as part of the viewports tool redesign. Firefox ESR 140.7+ does not resolve `min-height: 100%` on a `display: grid` element the same way Chromium does, so the Docs canvas collapses to ~100px and the preview becomes unusable in that browser. The sibling `IframeWrapper` in the same file has always used `width/height: 100%` for the same purpose, so this change restores symmetry with that component while fixing Firefox ESR. The reporter's bisect in the issue isolated the same lines. Verified by reading the bisect in #33743 and the diff in #33290; I do not have Firefox ESR locally — visual confirmation in FF ESR is left to Chromatic / a maintainer with that browser. --- .../core/src/manager/components/preview/utils/components.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/core/src/manager/components/preview/utils/components.ts b/code/core/src/manager/components/preview/utils/components.ts index ff3c4233f43f..bfcc6b40f7a7 100644 --- a/code/core/src/manager/components/preview/utils/components.ts +++ b/code/core/src/manager/components/preview/utils/components.ts @@ -27,8 +27,10 @@ export const CanvasWrap = styled.div<{ show: boolean }>( gridTemplateColumns: '100%', gridTemplateRows: '100%', position: 'relative', - minWidth: '100%', - minHeight: '100%', + // Firefox ESR collapses `min-height: 100%` on `display: grid` to ~100px + // (issue #33743); use `height` to match the sibling `IframeWrapper`. + width: '100%', + height: '100%', }, ({ show }) => ({ display: show ? 'grid' : 'none' }) );