fix (design library): better looking pro notice

Author: [email protected]

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

@@ -287,7 +287,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 			} }
 		>
 			{ ! isPro && plan !== 'free' && <span className="stk-pulsating-circle" role="presentation" /> }
-			<div style={ { position: 'relative' } } className={ `${ getDesignPreviewSize() > 200 ? 'stk--design-preview-large' : '' }` }>
+			<div style={ { position: 'relative' } } className={ `${ getDesignPreviewSize() > 100 ? 'stk--design-preview-large' : 'stk--design-preview-small' }` }>
 				{ ! isPro && plan !== 'free' && (
 					<ProControl
 						type="design-library"

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

@@ -86,17 +86,18 @@
 		display: flex;
 		flex-direction: column;
 		align-content: center;
+		min-height: 99px; // Quick fix to make the pro note visible for small preview designs.
 
 		h4 {
 			font-size: 12px !important;
-			margin-bottom: -6px !important;
 		}
 
 		.ugb-design-control-pro-note__description {
 			grid-row: 1/3;
 			grid-column: 2/3;
 			margin-bottom: 0 !important;
 			font-size: 11px !important;
+			margin-top: -6px !important;
 		}
 		a.button {
 			font-size: 11px !important;
@@ -168,6 +169,16 @@
 		z-index: 9;
 	}
 }
+
+.stk--design-preview-small {
+	.ugb-design-control-pro-note {
+		flex-direction: row !important;
+	}
+	.ugb-design-control-pro-note__description {
+		display: none;
+	}
+}
+
 // .ugb-design-library-item__image {
 // 	width: 100% !important;
 // 	margin: 0 !important;