Enhance editor empty state and stabilize panel layout

src/app/layouts/app-layout/app-layout.css

@@ -49,9 +49,11 @@
 
 .app-shell {
   display: flex;
-  flex: 1;
+  flex: 1 1 auto;
   flex-direction: column;
-  height: 100vh;
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
   overflow: hidden;
   padding-top: 112px;
 }
@@ -61,6 +63,8 @@
 }
 
 .app-main-content {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   flex: 1 1 auto;
   min-height: 0;

src/app/layouts/flow-editor/flow-editor.css

@@ -1,3 +1,12 @@
+:host {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
 .flow-editor-main {
   display: flex;
   flex: 1 1 auto;
@@ -27,10 +36,11 @@
   position: relative;
   flex-direction: column;
   flex: 0 0 380px;
+  align-self: stretch;
   width: 380px;
   min-width: 320px;
   max-width: 420px;
-  height: 100%;
+  height: auto;
   min-height: 0;
   background: #fff;
   overflow: hidden;
@@ -150,6 +160,15 @@
   line-height: 1.5;
 }
 
+.flow-editor-empty-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 6px;
+}
+
 .flow-editor-tour-target {
   height: 100%;
 }

src/app/layouts/flow-editor/flow-editor.html

@@ -1,10 +1,10 @@
-<div class="flex flex-col flex-1 h-full">
+<div class="flex flex-col flex-1 h-full min-h-0 min-w-0">
 
   <!-- HEADER -->
   <!--<app-header></app-header> -->
 
   <!-- BODY -->
-  <div class="flex flex-row flex-1 overflow-hidden">
+  <div class="flex flex-row flex-1 min-h-0 min-w-0 overflow-hidden">
 
     <!-- LEFT SIDEBAR -->
     <div data-tour="editor-sidebar">
@@ -27,7 +27,29 @@
       } @else {
       <div class="flow-editor-empty">
         <h2>No flow selected</h2>
+        @if (assistantEnabled) {
+        <p>Open an existing flow from the sidebar, create a new one, or ask the assistant to draft one to start editing.</p>
+        } @else {
         <p>Open an existing flow from the sidebar or create a new one to start editing.</p>
+        }
+        <div class="flow-editor-empty-actions">
+          <button
+            type="button"
+            mat-flat-button
+            color="primary"
+            [disabled]="creatingFlowFromEmpty()"
+            (click)="createFlowFromEmpty()">
+            <mat-icon fontIcon="add"></mat-icon>
+            New one
+          </button>
+          <button
+            type="button"
+            mat-stroked-button
+            (click)="openFlowsSidebar()">
+            <mat-icon fontIcon="menu_open"></mat-icon>
+            Open flows
+          </button>
+        </div>
       </div>
       }
     </main>

src/app/layouts/flow-editor/flow-editor.ts

@@ -47,6 +47,7 @@ export class FlowEditor {
   assistantEnabled = environment.assistantEnabled;
   assistantOpen = signal(true);
   activeRightPanel = signal<'assistant' | 'errors'>('assistant');
+  creatingFlowFromEmpty = signal(false);
   flow = this.editorState.currentFlow; 
   readonly = this.editorState.isCurrentFlowReadOnly;
   validationErrors = this.editorState.flowValidationErrors;
@@ -184,6 +185,24 @@ export class FlowEditor {
     await this.closeTour(true);
   }
 
+  openFlowsSidebar() {
+    this.editorSidebar?.openSide('flows');
+  }
+
+  async createFlowFromEmpty() {
+    if (this.creatingFlowFromEmpty()) return;
+    this.creatingFlowFromEmpty.set(true);
+    try {
+      const flow = await firstValueFrom(this.flowsService.createNewFlow());
+      await this.editorState.openDocument(flow, { skipDirtyCheck: true });
+      this.openFlowsSidebar();
+    } catch (err) {
+      console.error('Failed to create flow from empty state', err);
+    } finally {
+      this.creatingFlowFromEmpty.set(false);
+    }
+  }
+
   private async startTourIfNeeded() {
     const username = this.authorization.loggedInUser()?.username ?? null;
     if (!username) return;

src/app/shared/flow-assistant/flow-assistant.css

@@ -1,6 +1,17 @@
+:host {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
 .assistant-shell {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
+  min-width: 0;
   height: 100%;
   min-height: 0;
   overflow: hidden;

src/app/shared/flow-validation-panel/flow-validation-panel.css

@@ -1,6 +1,16 @@
+:host {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
 .validation-shell {
   display: flex;
   flex: 1 1 auto;
+  min-width: 0;
   min-height: 0;
   background:
     linear-gradient(180deg, #fff 0%, #fff7f7 100%);