Adopt shared WebUI layout primitives

webui/src/features/workflow/WorkflowPage.tsx

@@ -23,7 +23,7 @@ import {
 } from "lucide-react";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useSearchParams } from "react-router";
-import {
+import { ToolbarGroup, ActionToolbar,
   Button,
   ConfirmDialog,
   Dialog,
@@ -585,9 +585,9 @@ export default function WorkflowPage({
     <main className="workflow-page">
       <div className="workflow-shell">
         <aside className="workflow-definition-panel">
-          <div className="workflow-panel-toolbar">
+          <ActionToolbar className="workflow-panel-toolbar">
             <strong>Workflows</strong>
-            <span className="workflow-toolbar-actions">
+            <ToolbarGroup align="end" className="workflow-toolbar-actions">
               <DocumentationHelpLink
                 reference={{ topicId: "workflow.editor", documentationType: "user" }}
                 label="Open Workflow documentation"
@@ -616,8 +616,8 @@ export default function WorkflowPage({
                 disabled={!canWrite}
                 disabledReason={!canWrite ? "Workflow definition write permission is required." : undefined}
               />
-            </span>
-          </div>
+            </ToolbarGroup>
+          </ActionToolbar>
           <div className="workflow-definition-search">
             <input
               type="search"
@@ -671,7 +671,7 @@ export default function WorkflowPage({
         <section className="workflow-workspace">
           {draft && displayedGraph ? (
             <>
-              <div className="workflow-workspace-toolbar">
+              <ActionToolbar className="workflow-workspace-toolbar">
                 <span className="workflow-identity-fields">
                   <input
                     className="workflow-name-input"
@@ -858,7 +858,7 @@ export default function WorkflowPage({
                     />
                   ) : null}
                 </span>
-              </div>
+              </ActionToolbar>
               <div className="workflow-alerts">
                 {error ? (
                   <DismissibleAlert tone="danger" resetKey={error}>

webui/src/features/workflow/WorkflowRunsDialog.tsx

@@ -15,7 +15,7 @@ import {
   RotateCcw,
   XCircle
 } from "lucide-react";
-import {
+import { ActionToolbar,
   Button,
   ConfirmDialog,
   Dialog,
@@ -299,7 +299,7 @@ export default function WorkflowRunsDialog({
         onClose={close}
         footer={<Button onClick={close}>Close</Button>}
       >
-        <div className="workflow-runs-toolbar">
+        <ActionToolbar className="workflow-runs-toolbar">
           <span>
             <strong>Workflow instances</strong>
             <small>Revision-pinned runs and human handoffs</small>
@@ -325,7 +325,7 @@ export default function WorkflowRunsDialog({
               <Play size={16} /> Start
             </Button>
           </span>
-        </div>
+        </ActionToolbar>
         {error ? (
           <DismissibleAlert tone="danger" resetKey={error}>
             {error}