fix preview height

Author: kaeizen

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

@@ -97,14 +97,13 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 						showHideNote={ false }
 					/>
 				) }
-				{ isLoading && <Spinner style={ { display: 'block', margin: '50px auto' } } /> }
+				{ isLoading && <div className="stk-spinner-container"><Spinner /></div> }
 				<div
 					className="stk-block-design__host-container"
 					style={ {
 						transform: `scale(${ selectedNum && selectedData ? selectedData.selectedPreviewSize.scale : previewSize?.scale })`,
 						transformOrigin: 'top left',
-						height: selectedNum && selectedData ? selectedData.selectedPreviewSize.preview
-							: ( enableBackground ? previewSize.heightBackground : previewSize.heightNoBackground ),
+						height: getDesignPreviewSize(),
 					} }
 				>
 					<div className="stk-block-design__host" ref={ hostRef }>

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

@@ -223,3 +223,19 @@
 		cursor: default;
 	}
 }
+
+
+.ugb-design-library-items {
+	.stk-spinner-container .components-spinner {
+		display: block;
+		margin: 50px auto;
+	}
+
+	&.stk-design-library__item-pages .stk-spinner-container {
+		height: 400px;
+		display: flex;
+		.components-spinner {
+			margin: auto;
+		}
+	}
+}

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

@@ -128,7 +128,7 @@ const DesignLibraryItem = props => {
 
 	const getCardHeight = () => {
 		const key = props.enableBackground ? 'background' : 'noBackground'
-		return cardHeight?.[ key ] || 250
+		return props.selectedTab === 'pages' ? 472 : cardHeight?.[ key ] || 250
 	}
 
 	if ( ! shouldRender && ! props.selectedNum ) {

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

@@ -74,10 +74,15 @@ export const usePreviewRenderer = (
 			const shadowBody = shadowRoot.querySelector( 'body' )
 			if ( shadowBody ) {
 				const cardWidth = cardRect.width // Get width of the card
-				const scaleFactor = cardWidth > 0 ? cardWidth / shadowBody.offsetWidth : 1 	// Divide by 1200, which is the width of preview in the shadow DOM
+				const scaleFactor = cardWidth > 0 ? cardWidth / 1300 : 1 	// Divide by 1200, which is the width of preview in the shadow DOM
 				newPreviewSize.scale = scaleFactor
 
-				const _height = parseFloat( shadowBody.offsetHeight ) * scaleFactor	// Also adjust the height
+				let _bodyHeight = 1200
+				if ( selectedTab === 'patterns' ) {
+					_bodyHeight = shadowBody.offsetHeight
+				}
+
+				const _height = parseFloat( _bodyHeight ) * scaleFactor	// Also adjust the height
 
 				if ( Object.keys( newPreviewSize ).length === 1 ) {
 					newPreviewSize.heightBackground = _height