Feature: Responsive dynamic page layout with adaptive grid and centered rendering

[DJJones66]

PR Title

Feature: Responsive dynamic page layout with adaptive grid and centered rendering

---

Summary

This PR enhances the unified dynamic page renderer with responsive, viewport-aware layouts and centered rendering. It introduces adaptive row height calculations, dynamic padding adjustments, and a content-aware rendering pipeline that improves both editing and published experiences.

The changes also streamline dashboard behavior for dynamic pages by reducing unnecessary padding and applying layout-specific CSS variables.

---

Changes

🔹 Dashboard

• DashboardLayout.tsx

  • Integrated useLocation to detect when the user is on a dynamic page (/pages/*).
  • Reduced padding on dynamic pages to maximize usable space.
  • Added CSS variables for header/footer heights (--app-header-h, --app-footer-h).

🔹 Layout Engine

• LayoutEngine.tsx

  • Introduced adaptive rowHeight calculation based on container/viewport height using ResizeObserver.

  • Added logic for full-width layouts:

    • Expands modules when only a single module is present or when explicitly flagged with viewportFill/fullWidth.

  • Adjusted styling:

    • Borders and background are hidden in published mode.
    • Grid container now wraps in centering divs (layout-engine-center + layout-engine-inner) to balance layouts on wide screens.

  • Updated gridProps:

    • Dynamic rowHeight.
    • Conditional margins/padding for full-width layouts.
    • Disabled autoSize in favor of container-height control.

🔹 Module Renderer

• ModuleRenderer.tsx

  • Added module-content wrapper with flags:

    • module-content--no-center
    • module-content--fill

  • Enables centered or stretched rendering depending on module configuration.

🔹 Unified Page Renderer

• Imported centralized CSS (index.css) for layout and module styles.

🔹 Styles

• styles/index.css

  • Added centering wrappers for balanced grid alignment on wide screens.

  • Introduced module-content styles for flexible centering/fill behavior.

  • Responsive gutter/max-width variables for mobile, tablet, desktop, and wide screens.

  • Added viewport-fill support:

    • Pages respect header/footer CSS vars for proper vertical sizing.
    • Modules flagged as viewportFill expand to the full viewport height with internal scroll handling.

---

Motivation

• Improve dynamic page responsiveness across devices.
• Provide a full-width immersive experience when viewing published content.
• Eliminate awkward spacing and white flashes by centralizing grid alignment and removing unnecessary padding.
• Give modules more control over whether they center content or fill viewport height.

---

Impact

• Backward-compatible with existing layouts; only modules opting into new flags (viewportFill/fullWidth) change behavior.
• Published pages look cleaner, centered, and more responsive.
• Foundation for future responsive enhancements in the unified dynamic page renderer.