[Feat]: Optimize View Mode rendering performance by replacing transform-based layout with Flexbox (GridLayoutViewMode)

[hoangtung1501]

I created an experimental version of the View Mode layout system that replaces the current transform-based rendering with a Flexbox-based implementation (GridLayoutViewMode).

The goal of this approach is to improve rendering performance and layout calculation efficiency, especially when rendering large or complex pages.
This change focuses purely on render and layout computation optimization, not on reducing memory usage.

After replacing gridLayout with GridLayoutViewMode, rendering appears smoother with fewer layout recalculations. However, there are still minor inaccuracies in spacing and item positioning (small offsets and misalignments).

🔍 What was changed

Replaced transform: translate(...) layout logic with Flexbox positioning.

Layout order and sizing are handled by the browser’s flex layout engine instead of manual transform calculations.

Applied only for View Mode; Editor Mode remains unchanged.

⚠️ Current issues

Small spacing and alignment drift compared to the transform version.

Minor cross-browser differences in pixel rounding.

Some nested components with transforms render slightly differently under Flexbox.

💡 Request for feedback

I’d like to ask maintainers to review whether this approach is beneficial for rendering and layout performance in View Mode.
Specifically:

Is Flexbox a good long-term replacement for transform-based layout in this context?

Any recommended fixes for spacing/position drift (e.g. rounding logic, hybrid approach, or CSS Grid)?

Would you consider a PR or benchmark comparison to evaluate the rendering performance difference?

📎 Notes

Prototype file: GridLayoutViewMode.tsx

Replaces: gridLayout.tsx in View Mode only

Can share screenshots or performance trace comparisons if helpful

gridLayoutViewMode.tsx