Center automation flow horizontally on first load

[MAILPOET-5586]

mailpoet/assets/css/src/components-automation-editor/_automation.scss

@@ -1,13 +1,13 @@
 .mailpoet-automation-editor-automation {
   background: #fbfbfb;
+  display: grid;
   flex-grow: 1;
+  grid-template-rows: auto 1fr;
 }
 
 .mailpoet-automation-editor-automation-wrapper {
-  display: grid;
+  overflow: scroll;
-  justify-content: center;
+  padding: 0 20px 50px;
-  overflow: hidden;
-  padding: 50px 20px;
 }
 
 .mailpoet-automation-editor-automation-flow {
@@ -32,7 +32,7 @@
 }
 
 .mailpoet-automation-editor-stats {
-  margin: 0 auto 32px;
+  margin: 50px auto 32px;
   max-width: 480px;
   width: 100%;
 

mailpoet/assets/js/src/automation/editor/components/automation/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   __unstableComposite as Composite,
   __unstableUseCompositeState as useCompositeState,
@@ -30,6 +30,24 @@ export function Automation({ context }: AutomationProps): JSX.Element {
     shift: true,
   });
 
+  // We need to trigger one more render to center the scroll, because the sidebar
+  // is using a React Portal, and it is not in the layout after the first render.
+  const [rendered, setRendered] = useState(false);
+
+  useEffect(() => {
+    // first render
+    if (!rendered) {
+      setRendered(true);
+      return;
+    }
+
+    // center the scroll to the first step
+    const firstStep = document.querySelector('[data-step-id] > *');
+    if (firstStep instanceof HTMLElement) {
+      firstStep.scrollIntoView({ block: 'nearest', inline: 'center' });
+    }
+  }, [rendered]);
+
   if (!automationData) {
     return <EmptyAutomation />;
   }
@@ -44,8 +62,8 @@ export function Automation({ context }: AutomationProps): JSX.Element {
           aria-orientation="vertical"
           className="mailpoet-automation-editor-automation"
         >
-          <div className="mailpoet-automation-editor-automation-wrapper">
           <Statistics />
+          <div className="mailpoet-automation-editor-automation-wrapper">
             <div className="mailpoet-automation-editor-automation-flow">
               <Flow stepData={automationData.steps.root} row={0} />
             </div>

mailpoet/assets/js/src/automation/editor/index.tsx

@@ -5,8 +5,10 @@ import { Button, Icon, Popover, SlotFillProvider } from '@wordpress/components';
 import { store as noticesStore } from '@wordpress/notices';
 import { dispatch, select as globalSelect, useSelect } from '@wordpress/data';
 import { getSettings, setSettings } from '@wordpress/date';
+import { Platform } from '@wordpress/element';
 import { wordpress } from '@wordpress/icons';
 import {
+  store as interfaceStore,
   ComplementaryArea,
   FullscreenMode,
   InterfaceSkeleton,
@@ -21,7 +23,7 @@ import { KeyboardShortcuts } from './components/keyboard-shortcuts';
 import { EditorNotices } from './components/notices';
 import { Sidebar } from './components/sidebar';
 import { Automation } from './components/automation';
-import { createStore, storeName } from './store';
+import { automationSidebarKey, createStore, storeName } from './store';
 import { initializeApi } from '../api';
 import { initialize as initializeCoreIntegration } from '../integrations/core';
 import { initialize as initializeMailPoetIntegration } from '../integrations/mailpoet';
@@ -187,6 +189,17 @@ window.addEventListener('DOMContentLoaded', () => {
 
   createStore();
 
+  // Sync default sidebar state to the interface store before starting rendering,
+  // so that the layout is computed early enough to center the automation scroll.
+  const sidebarActiveByDefault = Platform.select({
+    web: true,
+    native: false,
+  });
+  dispatch(interfaceStore).enableComplementaryArea(
+    storeName,
+    sidebarActiveByDefault ? automationSidebarKey : undefined,
+  );
+
   const root = document.getElementById('mailpoet_automation_editor');
   if (root) {
     registerTranslations();