tweaked pro notice on full pages and fixed scrolling

Author: [email protected]

src/components/design-library-list/design-preview.js

@@ -17,9 +17,18 @@ export const DesignPreview = ( {
 } ) => {
 	const ref = useRef( null )
 
-	// Prevents scrolling using mousewheel
+	// Prevents scrolling using mousewheel but allows it to bubble to parent
 	const handleWheel = e => {
-		e.preventDefault()
+		// Don't prevent default - let the event bubble up to parent
+		// But stop propagation to prevent the preview content from scrolling
+		e.stopPropagation()
+
+		// Make the preview content non-scrollable
+		if ( ref.current ) {
+			ref.current.style.overflow = 'hidden'
+			// Reset scroll position to ensure content stays in place
+			ref.current.scrollTop = 0
+		}
 	}
 
 	const isDragging = useRef( false )
@@ -60,8 +69,8 @@ export const DesignPreview = ( {
 			return
 		}
 
-		// Add the event listener with { passive: false } to force the browser to allow preventDefault() to work.
-		container.addEventListener( 'wheel', handleWheel, { passive: false } )
+		// Add the event listener without passive: false since we're not using preventDefault
+		container.addEventListener( 'wheel', handleWheel )
 
 		container.addEventListener( 'mousedown', handleMouseDown )
 		// eslint-disable-next-line @wordpress/no-global-event-listener

src/components/design-library-list/editor.scss

@@ -199,3 +199,23 @@
 		}
 	}
 }
+
+// Full page previews
+.ugb-modal-design-library__full-pages {
+	.stk--design-preview-large {
+		cursor: grab;
+		cursor: -webkit-grab;
+		&.is-grabbing {
+			cursor: grabbing;
+			cursor: -webkit-grabbing;
+		}
+	}
+	.ugb-design-control-pro-note {
+		top: auto;
+		padding: 60px 30px 30px;
+		background: linear-gradient(180deg, transparent, #fffe 40px, #fff) !important;
+	}
+	.stk-block-design__host {
+		opacity: 1 !important;
+	}
+}