From 4704c8db2a7824531b4e86d4b851f737b44a0214 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Fri, 26 Jul 2024 10:41:59 -0400
Subject: [PATCH] feat(templates): add live preview breakpoints for mobile,
 tablet and desktop to website template (#7384)

---
 templates/website/src/payload.config.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/templates/website/src/payload.config.ts b/templates/website/src/payload.config.ts
index d11f4d5f3..6fde8a780 100644
--- a/templates/website/src/payload.config.ts
+++ b/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({