diff --git a/src/link/preview.js b/src/link/preview.js index c05bfee..9ae68ae 100644 --- a/src/link/preview.js +++ b/src/link/preview.js @@ -59,6 +59,18 @@ export const PreviewEditUI = ( { } }, [] ); + const addScrollListener = useCallback( () => { + const scrollCue = document.querySelector( '.wikipediapreview-scroll-cue' ); + const body = document.querySelector( '.wikipediapreview-body' ); + if ( scrollCue ) { + body.addEventListener( 'scroll', ( e ) => { + if ( e.target.scrollTop > 0 ) { + scrollCue.remove(); + } + } ); + } + }, [] ); + useEffect( () => { const { title, lang } = activeAttributes; if ( title && lang ) { @@ -69,6 +81,7 @@ export const PreviewEditUI = ( { }, [ activeAttributes ] ); useEffect( () => { + addScrollListener(); if ( isPopoverExpanded() ) { // The parent header div (where the menu needs to be inserted) // comes from previewHtml so we need to construct the menu on the fly @@ -82,7 +95,7 @@ export const PreviewEditUI = ( { ?.removeEventListener( 'click', toggleControllersMenu ); }; } - }, [ previewHtml, selectingSection, insertControllersMenu ] ); + }, [ previewHtml, selectingSection, insertControllersMenu, addScrollListener ] ); useLayoutEffect( () => { document diff --git a/src/link/style.scss b/src/link/style.scss index af15046..5932554 100644 --- a/src/link/style.scss +++ b/src/link/style.scss @@ -335,6 +335,7 @@ body { .components-popover__content { overflow: unset !important; border-radius: 8px 8px 0 0; + height: unset !important; } @media (prefers-color-scheme: dark ) { @@ -418,10 +419,6 @@ body { .wikipediapreview { box-shadow: none; - &-gallery { - display: none; - } - .wikipediapreview-footer { &-cta-readmore {