[BUG]: Responsiveness Issue: Components not adapting properly on different viewport

[SsagarikaR]

Describe the bug

The Page Builder currently uses absolute positioning for component placement, which causes misalignment and overlapping issues when switching between different viewport modes (e.g., desktop, tablet, mobile).

When users visualize the design in smaller or larger viewports, components do not adjust or scale properly, resulting in layout inconsistencies.

Steps to reproduce

Components are positioned using absolute coordinates on the canvas.

When switching viewports, components maintain fixed positions and dimensions.

Layout does not adapt to viewport breakpoints, leading to overlapping or cut-off elements.

Expected behavior

Components should adjust their layout and positioning when switching between viewports (desktop, tablet, mobile).

The builder should provide a responsive design visualization where layout adapts automatically based on viewport size.

Support for both positioning systems:

Absolute positioning (free drag & drop)

Grid-based positioning (structured layout)

What is actually happening?

This issue can be addressed by introducing a grid-based layout system along with the existing absolute drag & drop mode.
We can solve this by:

Implementing a CSS Grid–based canvas where components snap to grid cells.

Allowing users to toggle between layout modes via a prop (e.g., layoutMode="absolute" or layoutMode="grid").

Making grid dimensions and breakpoints responsive to predefined viewport sizes.

Ensuring components realign correctly in different viewports while maintaining their structure.

Screenshots

Any additional comments?

No response