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.

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,
+                height: iframeSize.height
-                cursor: panMode ? (isPanning ? 'grabbing' : 'grab') : undefined
               }}
             >
-              <iframe
+              <div
-                ref={iframeRef}
-                srcDoc={previewContentHTML}
-                onLoad={handleIframeLoad}
-                scrolling='no'
-                frameBorder='0'
                 style={{
-                  width: '100%',
+                  width: iframeSize.width,
-                  height: iframeSize.height === 'auto' ? 150 : '100%',
+                  height: iframeSize.height,
-                  display: 'block',
+                  cursor: panMode
-                  border: 0,
+                    ? isPanning
-                  overflow: 'hidden',
+                      ? 'grabbing'
-                  pointerEvents: panMode ? 'none' : undefined
+                      : '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