feat: align workflow view picker layout

web/app/components/workflow/header/index.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import type { HeaderInNormalProps } from './header-in-normal'
 import type { HeaderInRestoringProps } from './header-in-restoring'
 import type { HeaderInHistoryProps } from './header-in-view-history'
@@ -21,19 +22,15 @@ export type HeaderProps = {
   viewHistory?: HeaderInHistoryProps
   restoring?: HeaderInRestoringProps
 }
-const Header = ({
-  normal: normalProps,
-  viewHistory: viewHistoryProps,
-  restoring: restoringProps,
-}: HeaderProps) => {
+
+type HeaderShellProps = {
+  children: ReactNode
+}
+
+export const HeaderShell = ({ children }: HeaderShellProps) => {
   const pathname = usePathname()
   const inWorkflowCanvas = pathname.endsWith('/workflow')
   const isPipelineCanvas = pathname.endsWith('/pipeline')
-  const {
-    normal,
-    restoring,
-    viewHistory,
-  } = useWorkflowMode()
   const maximizeCanvas = useStore(s => s.maximizeCanvas)
 
   return (
@@ -41,6 +38,24 @@ const Header = ({
       className="absolute left-0 top-7 z-10 flex h-0 w-full items-center justify-between bg-mask-top2bottom-gray-50-to-transparent px-3"
     >
       {(inWorkflowCanvas || isPipelineCanvas) && maximizeCanvas && <div className="h-14 w-[52px]" />}
+      {children}
+    </div>
+  )
+}
+
+const Header = ({
+  normal: normalProps,
+  viewHistory: viewHistoryProps,
+  restoring: restoringProps,
+}: HeaderProps) => {
+  const {
+    normal,
+    restoring,
+    viewHistory,
+  } = useWorkflowMode()
+
+  return (
+    <HeaderShell>
       {
         normal && (
           <HeaderInNormal
@@ -62,7 +77,7 @@ const Header = ({
           />
         )
       }
-    </div>
+    </HeaderShell>
   )
 }