feat(templates): add live preview breakpoints for mobile, tablet and desktop to website template (#7384)

templates/website/src/payload.config.ts

@@ -58,6 +58,28 @@ export default buildConfig({
       beforeDashboard: [BeforeDashboard],
     },
     user: Users.slug,
+    livePreview: {
+      breakpoints: [
+        {
+          label: 'Mobile',
+          name: 'mobile',
+          width: 375,
+          height: 667,
+        },
+        {
+          label: 'Tablet',
+          name: 'tablet',
+          width: 768,
+          height: 1024,
+        },
+        {
+          label: 'Desktop',
+          name: 'desktop',
+          width: 1440,
+          height: 900,
+        },
+      ],
+    },
   },
   // This config helps us configure global or default features that the other editors can inherit
   editor: lexicalEditor({