From b2073fbdaa5b6b6e7c02924ef2dac2ab4cda9329 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 27 Jun 2024 11:34:20 +1000 Subject: [PATCH 1/3] Fix extra scrollbar when a popover extends past the viewport. --- .../interface/src/components/interface-skeleton/style.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index 776a177321d4b..6fcf9fa4906d6 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -82,10 +82,9 @@ html.interface-interface-skeleton__html-container { display: flex; flex-direction: column; - // On Mobile the header is fixed to keep HTML as scrollable. - // Beyond the medium breakpoint, we allow the sidebar. - // The sidebar should scroll independently, so enable scroll here also. - overflow: auto; + // Hide the Y overflow to avoid an extra scrollbar when an active popover + // extends vertically beyond the viewport. + overflow-y: hidden; // On Safari iOS on smaller viewports lack of a z-index causes the background // to "bleed" through the header. From 8aac4e1ee90c23b362b47b7c502fee6e9755fda4 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 27 Jun 2024 15:05:53 +1000 Subject: [PATCH 2/3] Scope overflow only to iframed canvas --- packages/editor/src/components/visual-editor/style.scss | 2 +- packages/interface/src/components/interface-skeleton/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss index f340f9f1313e3..b7fbf882a897b 100644 --- a/packages/editor/src/components/visual-editor/style.scss +++ b/packages/editor/src/components/visual-editor/style.scss @@ -19,7 +19,7 @@ // In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the // legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning. - .is-iframed { + &.is-iframed { overflow: hidden; } diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index 6fcf9fa4906d6..bb6d55f2192cc 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -84,7 +84,7 @@ html.interface-interface-skeleton__html-container { // Hide the Y overflow to avoid an extra scrollbar when an active popover // extends vertically beyond the viewport. - overflow-y: hidden; + overflow-y: auto; // On Safari iOS on smaller viewports lack of a z-index causes the background // to "bleed" through the header. From 81c8f6bd92c64d2ef7dbb9ac5eb901ad440d1d0a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 27 Jun 2024 15:11:30 +1000 Subject: [PATCH 3/3] revert other change --- .../interface/src/components/interface-skeleton/style.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index bb6d55f2192cc..776a177321d4b 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -82,9 +82,10 @@ html.interface-interface-skeleton__html-container { display: flex; flex-direction: column; - // Hide the Y overflow to avoid an extra scrollbar when an active popover - // extends vertically beyond the viewport. - overflow-y: auto; + // On Mobile the header is fixed to keep HTML as scrollable. + // Beyond the medium breakpoint, we allow the sidebar. + // The sidebar should scroll independently, so enable scroll here also. + overflow: auto; // On Safari iOS on smaller viewports lack of a z-index causes the background // to "bleed" through the header.