Flow Studio
Panel Sizing
PanelConstraints controls the minimum and maximum size of the Observer Panel and configures which dock positions are available. These constraints are passed as props when embedding FlowObserverPanel.
PanelConstraints Interface
// flow-observer-core/src/types/panel.types.ts
export interface PanelConstraints {
// Docked (right) constraints
minWidth?: number; // default: 320px
maxWidth?: number; // default: 800px
defaultWidth?: number; // default: 400px
// Docked (bottom) constraints
minHeight?: number; // default: 200px
maxHeight?: number; // default: 500px
defaultHeight?: number; // default: 300px
// Floating constraints
minFloatWidth?: number; // default: 360px
minFloatHeight?: number; // default: 280px
// Allowed dock positions
allowRightDock?: boolean; // default: true
allowBottomDock?: boolean; // default: true
allowFloat?: boolean; // default: true
}Applying Constraints
// Embedding with custom constraints
<FlowObserverPanel
executionId={executionId}
constraints={{
minWidth: 360,
maxWidth: 600,
defaultWidth: 420,
allowBottomDock: false // disable bottom dock for this deployment
}}
/>Default Constraints
| Property | Default Value |
|---|---|
| minWidth (right dock) | 320px |
| maxWidth (right dock) | 800px |
| defaultWidth (right dock) | 400px |
| minHeight (bottom dock) | 200px |
| maxHeight (bottom dock) | 500px |
| defaultHeight (bottom dock) | 300px |
| minFloatWidth | 360px |
| minFloatHeight | 280px |
Size Persistence
The user's last-set panel size is saved to localStorage with the key bfai:observer-panel-size. The stored value is clamped to the current PanelConstraints on restore — if constraints change between sessions, the stored size will be adjusted to fit.
Canvas Pushes with Right Dock
When the panel is in right-dock mode, the React Flow canvas container receives a CSS
padding-right equal to the panel width. This keeps the canvas usable and prevents the panel from overlapping nodes. The canvas re-fits the viewport when the panel width changes.