Skip to content

Event Layout ​

The event layout system controls how event buttons are arranged within a scene. Layout is controlled globally by the theme, with per-scene override support.

Configuration Location ​

  • Global Default: Theme → Scene → Events Layout Presets
  • Scene Override: Scene → Events Layout (overrides theme when set)

Layout Properties ​

Direction (flexDirection) ​

Controls the arrangement direction of event buttons:

ValueDescription
rowHorizontal (default)
row-reverseHorizontal - reversed
columnVertical
column-reverseVertical - reversed

Justify (justifyContent) ​

Controls distribution along the main axis:

ValueDescription
flex-startStart-aligned
flex-endEnd-aligned
centerCentered
space-betweenDistributed, edges flush
space-aroundDistributed, with half-spaces at edges (default)
space-evenlyEvenly distributed
stretchStretched

Align (alignItems) ​

Controls alignment along the cross axis:

ValueDescription
flex-startStart-aligned
flex-endEnd-aligned (default)
centerCentered
stretchStretched
baselineBaseline-aligned

Padding ​

Defines a bounding box via four-direction padding. Events are laid out only within this box.

Format: top right bottom left, e.g. 21px 21px 88px 21px.

Space Adjust ​

When enabled, ignores the actual size of event buttons and positions them as points. Useful for precise spacing control.

Scene Override ​

When a scene has its own Events Layout set, it will ignore the theme's global layout:

Scene → Events Layout: Layout-A
  → This scene uses Layout-A

Theme → Scene → Events Layout Presets: Layout-B
  → Other scenes without their own layout use Layout-B