From fb52a14dd0e4ffc819d501336c8b9a0b420b57f3 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 22 Aug 2026 13:11:49 +0100
Subject: [PATCH] Refactor TemplatePreview for Improved Layout and
 Responsiveness

- Replaced a div with a Flex component to enhance layout and alignment of the TemplatePreview.
- Adjusted styles to ensure minimum width and proper cursor behavior during panning.
- Streamlined iframe rendering within the new structure for better responsiveness and user experience.
---
 .../Dashboard/common/TemplatePreview.jsx      | 48 ++++++++++++-------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/Dashboard/common/TemplatePreview.jsx b/src/components/Dashboard/common/TemplatePreview.jsx
index dbce1c0c..e587c845 100644
--- a/src/components/Dashboard/common/TemplatePreview.jsx
+++ b/src/components/Dashboard/common/TemplatePreview.jsx
@@ -614,29 +614,43 @@ const TemplatePreview = ({
               touchAction: panMode ? 'none' : undefined
             }}
           >
-            <div
+            <Flex
+              justify='center'
+              align='center'
               style={{
+                minWidth: '100%',
                 width: iframeSize.width,
-                height: iframeSize.height,
-                cursor: panMode ? (isPanning ? 'grabbing' : 'grab') : undefined
+                height: iframeSize.height
               }}
             >
-              <iframe
-                ref={iframeRef}
-                srcDoc={previewContentHTML}
-                onLoad={handleIframeLoad}
-                scrolling='no'
-                frameBorder='0'
+              <div
                 style={{
-                  width: '100%',
-                  height: iframeSize.height === 'auto' ? 150 : '100%',
-                  display: 'block',
-                  border: 0,
-                  overflow: 'hidden',
-                  pointerEvents: panMode ? 'none' : undefined
+                  width: iframeSize.width,
+                  height: iframeSize.height,
+                  cursor: panMode
+                    ? isPanning
+                      ? 'grabbing'
+                      : 'grab'
+                    : undefined
                 }}
-              />
-            </div>
+              >
+                <iframe
+                  ref={iframeRef}
+                  srcDoc={previewContentHTML}
+                  onLoad={handleIframeLoad}
+                  scrolling='no'
+                  frameBorder='0'
+                  style={{
+                    width: '100%',
+                    height: iframeSize.height === 'auto' ? 150 : '100%',
+                    display: 'block',
+                    border: 0,
+                    overflow: 'hidden',
+                    pointerEvents: panMode ? 'none' : undefined
+                  }}
+                />
+              </div>
+            </Flex>
           </ScrollBox>
         ) : (
           <PDFViewer