[BUG]: Preview mode & PDF export: Styles not matching canvas (components overlapping)

[SsagarikaR]

Describe the bug

When switching to Preview mode or generating a PDF, the layout and styles of custom components do not match what is shown in the canvas editor.

Some components overlap each other.

Styles (spacing, font, positioning) appear different from canvas view.

Generated PDF output is not visually consistent with what the user built.

This issue makes it difficult to trust the preview/export feature since the final result looks broken compared to the design canvas.

Steps to reproduce

1.Add custom components inside the canvas.
2.Click Preview or export as PDF.
3.Compare with canvas design.

Expected behavior

1. Preview should display components exactly as arranged in the canvas.
2. PDF export should keep the same styles (spacing, fonts, alignment, layout).
3. No overlapping of components.

What is actually happening?

1. Some components overlap or shift from their original positions.
2. Styles like spacing, font, alignment, or responsiveness look different.
3. Final PDF/preview layout does not match the canvas layout.

Screenshots

Any additional comments?

Possible Cause:-

1. Styles are being recomputed or lost when generating preview/PDF.
2. Only a limited set of CSS properties are being captured (not full computed styles).
3. Dynamic styles from libraries like MUI (with generated class names, pseudo-classes, responsive rules) are not preserved.
4. getComputedStyle usage doesn’t capture pseudo-elements, media queries, or all inherited styles.