Merge pull request #429 from Codeinwp/fix/onboarding-layout

fix: onboarding layout overflow and responsiveness

Author: abaicus

.github/workflows/e2e.yml

@@ -34,7 +34,7 @@ jobs:
         run: npm run ci:e2e
       - name: Upload artifacts on failure
         if: failure()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: e2e-artifacts
           path: ./artifacts

onboarding/src/Components/Steps/SiteList.js

@@ -44,10 +44,11 @@ const SiteList = ( { showToast, setShowToast, setFetching } ) => {
 	}, [] );
 
 	return (
-		<div className="ob-container wide">
-			<div className="ob-title-wrap">
-				<h1>
-					{ __( 'Choose a design', 'templates-patterns-collection' ) }
+		<div className="ob-container">
+			<div className="ob-container-inner">
+				<div className="ob-title-wrap">
+					<h1>
+						{ __( 'Choose a design', 'templates-patterns-collection' ) }
 				</h1>
 				<EditorSelector />
 			</div>
@@ -61,6 +62,7 @@ const SiteList = ( { showToast, setShowToast, setFetching } ) => {
 					message={ toastMessage }
 				/>
 			) }
+			</div>
 		</div>
 	);
 };

onboarding/src/scss/_general.scss

@@ -64,6 +64,14 @@ iframe {
   height: 100%;
 }
 
+.ob-container-inner {
+  max-width: 1400px;
+  margin: 0 auto; 
+  width: 100%;    
+  padding: 25px;
+  box-sizing: border-box;
+}
+
 .ob-container {
   flex-direction: column;
   display: flex;
@@ -101,17 +109,7 @@ iframe {
   display: grid;
   grid-row-gap: 24px;
   grid-column-gap: 24px;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  
-  justify-content: space-between;
-
-  @media (min-width: 650px ) {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  @media (min-width: 1400px) {
-    min-width: 1400px;
-  }
+  grid-template-columns: 1fr;
 }
 
 .ob-title-wrap {
@@ -213,9 +211,15 @@ input.components-text-control__input[type="email"],
 }
 
 @mixin ob-general--laptop() {
+  .ob-sites.is-grid {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 }
 
 @mixin ob-general--tablet() {
+  .ob-sites.is-grid {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 .components-modal__content:has( .ob-modal-confirm-title ) .components-button.is-tertiary {