Update preview layout (#129)

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

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 {