existing stlye update

apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx

@@ -24,9 +24,9 @@ export const MetricContent = React.memo(
     const ref = useRef<HTMLDivElement>(null);
 
     const [inViewport] = useInViewport(ref, {
-      threshold: isExportMode ? 0 : 0.33
+      threshold: 0.33
     });
-    const renderChart = inViewport;
+    const renderChart = inViewport || isExportMode;
 
     const {
       data: metric,
@@ -72,6 +72,7 @@ export const MetricContent = React.memo(
 
     return (
       <MetricCard
+        ref={ref}
         metricLink={link}
         animate={!isExportMode}
         metricId={metricId}

apps/web/src/controllers/ReportPageControllers/useReportPageExport.tsx

@@ -4,6 +4,7 @@ import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { useRef, useState } from 'react';
 import { ReportPageController } from './ReportPageController';
 import { printHTMLPage } from '@/lib/print';
+import { timeout } from '@/lib';
 
 const ExportContainerComponent: React.FC<{
   reportId: string;
@@ -18,13 +19,15 @@ const ExportContainerComponent: React.FC<{
       ref={ref}
       style={{
         width: '820px',
+        minWidth: '820px',
+        maxWidth: '820px',
         height: '100%',
         position: 'fixed',
         top: 0,
-        left: -1,
+        left: 0,
         right: 0,
         bottom: 0,
-        zIndex: 100
+        zIndex: -1
       }}>
       <ReportPageController
         reportId={reportId}
@@ -36,7 +39,7 @@ const ExportContainerComponent: React.FC<{
             if (immiateChild) {
               await buildHtmlMethod(immiateChild, reportName || '');
             }
-          }, 100);
+          }, 150);
         }}
       />
     </div>
@@ -63,10 +66,11 @@ export const useReportPageExport = ({
 
   const buildHtmlMethod = useMemoizedFn(async (node: HTMLElement, title: string) => {
     try {
+      await timeout(150); //wait for chart nodes to be rendered
       const result = await buildExportHtml({ root: node, title });
       printHTMLPage({ html: result, filename: title, closeOnPrint: false });
     } finally {
-      setIsExportingReport(false);
+      //  setIsExportingReport(false);
     }
   });
 
@@ -156,6 +160,13 @@ const buildExportHtml = async (options?: {
       clone.removeAttribute('spellcheck');
     }
 
+    // Ensure the cloned root has no padding and full width
+    const existingStyle = clonedRoot.getAttribute('style') || '';
+    clonedRoot.setAttribute(
+      'style',
+      `${existingStyle}; width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible;`.trim()
+    );
+
     // Wrap content with a fixed width, centered container for consistency
     const wrapper = document.createElement('div');
     wrapper.setAttribute(