From 9c0dbebe237ccbcb1bf8c8d5b910dc019d92d200 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Wed, 16 Oct 2024 11:46:36 -0400 Subject: [PATCH 1/2] Wrap overflow: auto in media query for smaller screens only Addresses #66161 --- .../interface/src/components/interface-skeleton/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index fb150daceadc9e..de14708d45670f 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -56,7 +56,9 @@ html.interface-interface-skeleton__html-container { // or beyond the bottom of the page when the soft keyboard is showing, you scroll // the body element and can scroll the toolbar out of view. // This is still preferable, though, as it allows the editor to function at all. - overflow: auto; + @media (max-width: #{ ($break-medium - 1) }) { + overflow: auto; + } // In future versions of Mobile Safari, hopefully overscroll-behavior will be supported. // This allows us to disallow the scroll-chaining and rubber-banding that is currently From 523654338d34bd236d0c1e1826c89e467e38b42b Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Thu, 17 Oct 2024 10:57:44 -0400 Subject: [PATCH 2/2] Set overflow-y: auto for code editor --- .../interface/src/components/interface-skeleton/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index de14708d45670f..5c168b613e8115 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -60,6 +60,10 @@ html.interface-interface-skeleton__html-container { overflow: auto; } + @include break-medium() { + overflow-y: auto; + } + // In future versions of Mobile Safari, hopefully overscroll-behavior will be supported. // This allows us to disallow the scroll-chaining and rubber-banding that is currently // is the cause of the issue outlined above.