<1024

Author: wpalani

src/app/steps/Canvas/MobileLayoutSwitcher.js

@@ -1,6 +1,5 @@
 export { default as CanvasStep } from './CanvasStep';
 export { default as HeaderActions } from './HeaderActions';
-export { default as MobileLayoutSwitcher } from './MobileLayoutSwitcher';
 export { default as Preview } from './Preview';
 export { default as Sidebar } from './Sidebar';
 

src/app/steps/Canvas/index.js

@@ -73,14 +73,14 @@ const PreviewsStep = () => {
 
 	return (
 		<Step>
-			<Container className="nfd-onboarding-step-container nfd-onboarding-step-previews nfd-min-w-[948px] nfd-max-w-[948px]">
+			<Container className="nfd-onboarding-step-container nfd-onboarding-step-previews nfd-min-w-[948px] nfd-max-w-[948px] tablet:nfd-min-w-[90%] tablet:nfd-max-w-[90%]">
 				<Container.Header
 					title={ getStepTitle() }
 					description={ getStepDescription() }
 					className="nfd-gap-2"
 				/>
-				<Container.Block className="mobile:nfd-w-screen">
-					<div className="nfd-grid nfd-grid-cols-3 nfd-gap-6 mobile:!nfd-grid-cols-[repeat(3,minmax(300px,1fr))] mobile:nfd-overflow-x-auto mobile:-nfd-ml-[5%] mobile:nfd-pl-[5%] mobile:nfd-mr-[5%] mobile:nfd-pr-[5%]">
+				<Container.Block className="tablet:nfd-w-screen">
+					<div className="nfd-grid nfd-grid-cols-3 nfd-gap-6 tablet:!nfd-grid-cols-[repeat(3,minmax(300px,1fr))] tablet:nfd-overflow-x-auto tablet:-nfd-ml-[5%] tablet:nfd-pl-[5%] tablet:nfd-mr-[5%] tablet:nfd-pr-[5%]">
 						{ renderPreviews() }
 					</div>
 				</Container.Block>

src/app/steps/Previews/PreviewsStep.js

@@ -31,6 +31,7 @@ module.exports = {
 			},
 			screens: {
 				mobile: { max: '600px' },
+				tablet: { max: '1024px' },
 			},
 		},
 	},