improvement(workflow): move canvas controls into header

Author: andresdjasso

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx

@@ -21,7 +21,10 @@ import {
   useUsageLimits,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks'
 import { Variables } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables'
-import { WorkflowHistoryControls } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls'
+import {
+  WorkflowControls,
+  WorkflowHistoryControls,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls'
 import { WorkflowOptionsMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-options-menu'
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import { useFolderMap } from '@/hooks/queries/folders'
@@ -190,6 +193,7 @@ export const Panel = memo(function Panel({ onCloseEditor }: PanelProps) {
             <WorkflowOptionsMenu isExecuting={isExecuting} />
           </div>
           <WorkflowHistoryControls />
+          <WorkflowControls />
         </div>
         <div
           className={cn(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx

@@ -88,7 +88,7 @@ export const WorkflowHistoryControls = memo(function WorkflowHistoryControls() {
 })
 
 /**
- * Floating controls for canvas mode and fit-to-view.
+ * Header controls for canvas mode and fit-to-view.
  */
 export const WorkflowControls = memo(function WorkflowControls() {
   const reactFlowInstance = useReactFlow()
@@ -136,7 +136,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
   return (
     <>
       <div
-        className='absolute bottom-4 left-[16px] z-10 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-1)] p-1'
+        className='flex h-[36px] flex-shrink-0 items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-1)] p-1'
         onContextMenu={handleContextMenu}
       >
         {/* Canvas Mode Selector */}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -55,7 +55,6 @@ import {
 import { Cursors } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors'
 import { ErrorBoundary } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/error/index'
 import { WorkflowSearchReplace } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace'
-import { WorkflowControls } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls'
 import {
   useAutoLayout,
   useCanvasContextMenu,
@@ -4769,7 +4768,6 @@ const WorkflowContent = React.memo(
 
                 {!embedded && (
                   <>
-                    <WorkflowControls />
                     <Suspense fallback={null}>
                       <LazyChat />
                     </Suspense>