From 7793da8c5f5f68eca3a94564c1578a82b31c4fd3 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sat, 7 Mar 2026 02:10:12 -0500
Subject: [PATCH] fix: move AI Assist panel to full-height side layout in both
 editors

The AI panel was nested inside the content area, only spanning the
step list / canvas section. Now it sits at the outermost flex level,
spanning the full page height alongside all content (toolbar,
collapsible sections, steps/canvas). This prevents the panel from
overlapping content and lets the editor area properly shrink.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/ProceduralEditorPage.tsx | 43 ++++++++-------
 frontend/src/pages/TreeEditorPage.tsx       | 61 +++++++++++----------
 2 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/frontend/src/pages/ProceduralEditorPage.tsx b/frontend/src/pages/ProceduralEditorPage.tsx
index 01030d29..3f5ac544 100644
--- a/frontend/src/pages/ProceduralEditorPage.tsx
+++ b/frontend/src/pages/ProceduralEditorPage.tsx
@@ -180,7 +180,9 @@ export function ProceduralEditorPage() {
   }
 
   return (
-    <div className="flex h-full flex-col overflow-hidden">
+    <div className="flex h-full overflow-hidden">
+      {/* Main content column */}
+      <div className="flex flex-1 flex-col overflow-hidden">
       {/* Toolbar — sticky */}
       <div className="flex shrink-0 items-center justify-between border-b border-border bg-card px-4 py-2">
         <div className="flex items-center gap-3">
@@ -315,27 +317,26 @@ export function ProceduralEditorPage() {
         )}
       </div>
 
-      {/* Step List + AI Panel */}
-      <div className="flex min-h-0 flex-1 overflow-hidden">
-        <div className="flex-1 overflow-y-auto px-4 py-4">
-          <StepList onStepContextMenu={editorAI.openContextMenu} />
-        </div>
-
-        <EditorAIPanel
-          isOpen={editorAI.isOpen}
-          onClose={editorAI.closePanel}
-          focalNode={null}
-          flowName={name}
-          flowType={isMaintenance ? 'maintenance' : 'procedural'}
-          nodeCount={steps.length}
-          messages={editorAI.messages}
-          input={editorAI.input}
-          onInputChange={editorAI.setInput}
-          onSend={editorAI.sendMessage}
-          isLoading={editorAI.isLoading}
-          suggestions={editorAI.suggestions}
-        />
+      {/* Step List */}
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+        <StepList onStepContextMenu={editorAI.openContextMenu} />
       </div>
+      </div>{/* end main content column */}
+
+      <EditorAIPanel
+        isOpen={editorAI.isOpen}
+        onClose={editorAI.closePanel}
+        focalNode={null}
+        flowName={name}
+        flowType={isMaintenance ? 'maintenance' : 'procedural'}
+        nodeCount={steps.length}
+        messages={editorAI.messages}
+        input={editorAI.input}
+        onInputChange={editorAI.setInput}
+        onSend={editorAI.sendMessage}
+        isLoading={editorAI.isLoading}
+        suggestions={editorAI.suggestions}
+      />
 
       {editorAI.contextMenu && (
         <ContextMenu
diff --git a/frontend/src/pages/TreeEditorPage.tsx b/frontend/src/pages/TreeEditorPage.tsx
index 42efcb75..f9c7450e 100644
--- a/frontend/src/pages/TreeEditorPage.tsx
+++ b/frontend/src/pages/TreeEditorPage.tsx
@@ -522,7 +522,9 @@ export function TreeEditorPage() {
   }
 
   return (
-    <div className="flex h-full flex-col overflow-hidden">
+    <div className="flex h-full overflow-hidden">
+      {/* Main content column */}
+      <div className="flex flex-1 flex-col overflow-hidden">
 
       {/* Draft Restore Prompt */}
       {showDraftPrompt && (
@@ -837,35 +839,16 @@ export function TreeEditorPage() {
         </div>
       )}
 
-      {/* Main Editor + AI Panel */}
-      <div className="flex min-h-0 flex-1 overflow-hidden">
-        <div className="flex-1 overflow-hidden">
-          <TreeEditorLayout
-            isMobile={isMobile}
-            isMetadataOpen={isMetadataOpen}
-            onCloseMetadata={() => setIsMetadataOpen(false)}
-            editingNodeId={editorAI.isOpen ? null : editingNodeId}
-            onNodeSelect={handleNodeSelect}
-            onSelectAnswerType={handleSelectAnswerType}
-            onNodeContextMenu={editorAI.openContextMenu}
-          />
-        </div>
-
-        <EditorAIPanel
-          isOpen={editorAI.isOpen}
-          onClose={handleAIPanelClose}
-          focalNode={editorAI.focalNodeId && treeStructure
-            ? findNodeInTree(editorAI.focalNodeId, treeStructure)
-            : null}
-          flowName={name}
-          flowType="troubleshooting"
-          nodeCount={treeStructure ? getAllNodeIds().length : 0}
-          messages={editorAI.messages}
-          input={editorAI.input}
-          onInputChange={editorAI.setInput}
-          onSend={editorAI.sendMessage}
-          isLoading={editorAI.isLoading}
-          suggestions={editorAI.suggestions}
+      {/* Main Editor */}
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <TreeEditorLayout
+          isMobile={isMobile}
+          isMetadataOpen={isMetadataOpen}
+          onCloseMetadata={() => setIsMetadataOpen(false)}
+          editingNodeId={editorAI.isOpen ? null : editingNodeId}
+          onNodeSelect={handleNodeSelect}
+          onSelectAnswerType={handleSelectAnswerType}
+          onNodeContextMenu={editorAI.openContextMenu}
         />
       </div>
 
@@ -894,6 +877,24 @@ export function TreeEditorPage() {
           onClose={() => setShowExportModal(false)}
         />
       )}
+      </div>{/* end main content column */}
+
+      <EditorAIPanel
+        isOpen={editorAI.isOpen}
+        onClose={handleAIPanelClose}
+        focalNode={editorAI.focalNodeId && treeStructure
+          ? findNodeInTree(editorAI.focalNodeId, treeStructure)
+          : null}
+        flowName={name}
+        flowType="troubleshooting"
+        nodeCount={treeStructure ? getAllNodeIds().length : 0}
+        messages={editorAI.messages}
+        input={editorAI.input}
+        onInputChange={editorAI.setInput}
+        onSend={editorAI.sendMessage}
+        isLoading={editorAI.isLoading}
+        suggestions={editorAI.suggestions}
+      />
 
       {/* AI Context Menu */}
       {editorAI.contextMenu && (