Skip to main content

Introducing Support for Layout Configuration in Portal

· 2 min read

You can now configure layout within the theme object of your portal. This gives you precise, declarative control over container alignment and maximum width—enabling cleaner, more responsive layouts with minimal effort.

note

This feature is only available inside the theme object. Layout definitions in the legacy themeOverrides object are not supported.

Purpose​

The layout object exists to:

  • Set maximum widths for layout containers.
  • Define horizontal alignment for content (left or center).
  • Create visually balanced, readable layouts for desktop users.

How to Use It​

Enable Layout Configuration​

To activate layout control, define a layout object under theme:

theme: {
  layout: {
    mainContainer: {
      maxWidth: '1250px', // or '80rem'
      align: 'center',    // or 'left'
    },
    content: {
      maxWidth: '700px',  // or '44rem'
      align: 'left',      // or 'center'
    },
  }
}

For full configuration details, see the theme layout configuration reference.

These settings are optimized for desktop viewports and are not applied on tablets and smaller devices to ensure the best experience across screen sizes.

Examples:​

Below are the four different alignment variations applied while the mainContainer has a maxWidth of 1250px and the content has a maxWidth of 700px.

mainContainer = left​

The mainContainer is aligned to left.

left-left

mainContainer = center​

The mainContainer is aligned to center.

center-left