From ce9aaf54e1eb985f8b36e77bffb18c43b1b8b02f Mon Sep 17 00:00:00 2001
From: Nicola Peluchetti <nicola.peluchetti@gmail.com>
Date: Tue, 26 Nov 2024 15:13:04 +0400
Subject: [PATCH] Change number of columns based on number of kits [TMZ-178]
 (#92)

---
 .../js/components/onboarding/screens/install-kit.js   | 11 +++++++++--
 .../assets/js/components/top-bar/top-bar-content.js   |  2 +-
 modules/admin/assets/js/pages/onboarding-page.js      |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/modules/admin/assets/js/components/onboarding/screens/install-kit.js b/modules/admin/assets/js/components/onboarding/screens/install-kit.js
index 81669032..247e2dc0 100644
--- a/modules/admin/assets/js/components/onboarding/screens/install-kit.js
+++ b/modules/admin/assets/js/components/onboarding/screens/install-kit.js
@@ -7,8 +7,15 @@ import Grid from '@elementor/ui/Grid';
 import { PreviewWithImage } from '../../preview/preview-with-image';
 
 export const InstallKit = ( { message, kits = [], setPreviewKit, severity } ) => {
+	let md = 3;
+
+	if ( 0 !== kits.length % 4 && 0 === kits.length % 3 ) {
+		// if a number is divisble by 3 update to 3
+		md = 4;
+	}
+
 	return (
-		<Stack direction="column" alignItems="center" justifyContent="center">
+		<Stack direction="column" alignItems="center" justifyContent="center" sx={ { overflowY: 'auto' } }>
 			<Stack sx={ { maxWidth: 900 } } alignItems="center" justifyContent="center" gap={ 4 }>
 				<Navigation />
 				<Stack alignItems="center" justifyContent="center" gap={ 4 }>
@@ -27,7 +34,7 @@ export const InstallKit = ( { message, kits = [], setPreviewKit, severity } ) =>
 
 					<Grid container rowSpacing={ 3 } columnSpacing={ 5 } >
 						{ kits.map( ( kit ) => (
-							<Grid key={ kit._id } item xs={ 12 } sm={ 6 } md={ 3 }>
+							<Grid key={ kit._id } item xs={ 12 } sm={ 6 } md={ md }>
 								<PreviewWithImage { ...kit } onClick={ () => {
 									setPreviewKit( kit );
 								} } />
diff --git a/modules/admin/assets/js/components/top-bar/top-bar-content.js b/modules/admin/assets/js/components/top-bar/top-bar-content.js
index 1dd54044..e7826f88 100644
--- a/modules/admin/assets/js/components/top-bar/top-bar-content.js
+++ b/modules/admin/assets/js/components/top-bar/top-bar-content.js
@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 
 export const TopBarContent = ( { sx = {}, iconSize = 'medium', onClose } ) => {
 	return (
-		<Stack direction="row" sx={ { alignItems: 'center', height: 50, px: 2, backgroundColor: 'background.default', justifyContent: 'space-between', ...sx } }>
+		<Stack direction="row" sx={ { alignItems: 'center', minHeight: 50, px: 2, backgroundColor: 'background.default', justifyContent: 'space-between', ...sx } }>
 			<Stack direction="row" spacing={ 1 } alignItems="center">
 				<SvgIcon fontSize={ iconSize } color="secondary">
 					<ElementorNoticeIcon />
diff --git a/modules/admin/assets/js/pages/onboarding-page.js b/modules/admin/assets/js/pages/onboarding-page.js
index 534139c8..a278ae2f 100644
--- a/modules/admin/assets/js/pages/onboarding-page.js
+++ b/modules/admin/assets/js/pages/onboarding-page.js
@@ -94,7 +94,7 @@ export const OnboardingPage = () => {
 	return (
 		<ThemeProvider colorScheme="auto">
 			<Modal open sx={ { zIndex: 100000 } } >
-				<Box style={ { ...style, display: 'flex', flexDirection: 'column' } }>
+				<Box style={ { ...style, display: 'flex', flexDirection: 'column', py: 4 } }>
 					{ ! previewKit && ( <TopBarContent onClose={ onClose } sx={ { borderBottom: '1px solid var(--divider-divider, rgba(0, 0, 0, 0.12))', mb: 4 } } iconSize="small" /> ) }
 					{ 0 === step && ! isLoading && ! previewKit && (
 						<GetStarted allowTracking={ allowTracking } setAllowTracking={ setAllowTracking } severity={ severity } message={ message } buttonText={ buttonText } onClick={ onClick } />