Update NewDocumentJob Component for Improved TemplatePreview Layout

- Adjusted the sidebar div in the NewDocumentJob component to use a calculated height for better responsiveness.
- Ensured the sidebar maintains a minimum width, enhancing the overall layout and user experience of the TemplatePreview.

src/components/Dashboard/Management/DocumentJobs/NewDocumentJob.jsx

@@ -57,7 +57,13 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
             disabled={downloading}
             sideBarGrow={true}
             sideBar={
-              <div style={{ minHeight: '760px', flexGrow: 1 }}>
+              <div
+                style={{
+                  height: 'calc(100vh - 240px)',
+                  flexGrow: 1,
+                  minWidth: 0
+                }}
+              >
                 <TemplatePreview
                   objectData={objectData?.object}
                   documentTemplate={objectData?.documentTemplate}

src/components/Dashboard/common/TemplatePreview.jsx

@@ -171,6 +171,19 @@ const TemplatePreview = ({
     setPreviewContentHTML(html)
   }
 
+  const clearIframeContents = useCallback(() => {
+    iframeSizeObserverRef.current?.disconnect()
+    iframeSizeObserverRef.current = null
+
+    const iframe = iframeRef.current
+    if (iframe) {
+      iframe.srcdoc = ''
+    }
+
+    setPreviewContentHTML('')
+    setIframeSize({ width: '100%', height: 'auto' })
+  }, [])
+
   const stopRenderProgressListener = useCallback(() => {
     if (typeof renderUnsubscribeRef.current === 'function') {
       renderUnsubscribeRef.current()
@@ -541,10 +554,11 @@ const TemplatePreview = ({
             disabled={loading || reloadLoading}
             value={previewType}
             onChange={(value) => {
-              setPreviewType(value)
               if (value == 'PDF') {
+                clearIframeContents()
                 setPDFBlob(null)
               }
+              setPreviewType(value)
             }}
           />
         ) : null}
@@ -600,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