fix: render create action bar in page layout

apps/ui/src/features/operation-form/operation-form.tsx

@@ -2,6 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef } from "react";
 import { useForm } from "react-hook-form";
+import { createPortal } from "react-dom";
 import { useNavigate } from "react-router-dom";
 
 import { createOperation } from "../../entities/operation/api";
@@ -195,7 +196,11 @@ function bytesToBase64(buffer: ArrayBuffer) {
   return window.btoa(binary);
 }
 
-export function OperationForm() {
+type OperationFormProps = {
+  actionBarContainerId?: string;
+};
+
+export function OperationForm({ actionBarContainerId }: OperationFormProps) {
   const navigate = useNavigate();
   const form = useForm<OperationFormValues>({
     defaultValues: defaultOperationFormValues,
@@ -236,6 +241,9 @@ export function OperationForm() {
     }
   }, [activeProtocol]);
 
+  const actionBarContainer =
+    actionBarContainerId === undefined ? null : document.getElementById(actionBarContainerId);
+
   async function handleDescriptorFileChange(file: File | undefined) {
     if (file === undefined) {
       return;
@@ -339,13 +347,15 @@ export function OperationForm() {
   }
 
   return (
-    <form
+    <>
-      className="builder-stack"
+      <form
-      onSubmit={form.handleSubmit((values) => {
+        className="builder-stack"
-        creationMutation.mutate(values);
+        id="operation-create-form"
-      })}
+        onSubmit={form.handleSubmit((values) => {
-    >
+          creationMutation.mutate(values);
-      <div className="builder-content">
+        })}
+      >
+        <div className="builder-content">
         <section className="builder-card">
           <header className="builder-card-header">
             <div>
@@ -503,17 +513,28 @@ export function OperationForm() {
               : "Failed to create operation"}
           </div>
         ) : null}
-      </div>
-
-      <div className="sticky-action-bar">
-        <div className="sticky-action-copy">
-          <span className="status-pill status-testing">ready to publish later</span>
-          <p>{protocolSummary(activeProtocol)}</p>
         </div>
-        <button className="button-primary button-primary-strong" type="submit" disabled={creationMutation.isPending}>
+      </form>
-          {creationMutation.isPending ? "Creating..." : "Create operation"}
+
-        </button>
+      {actionBarContainer
-      </div>
+        ? createPortal(
-    </form>
+            <div className="sticky-action-bar">
+              <div className="sticky-action-copy">
+                <span className="status-pill status-testing">ready to publish later</span>
+                <p>{protocolSummary(activeProtocol)}</p>
+              </div>
+              <button
+                className="button-primary button-primary-strong"
+                type="submit"
+                form="operation-create-form"
+                disabled={creationMutation.isPending}
+              >
+                {creationMutation.isPending ? "Creating..." : "Create operation"}
+              </button>
+            </div>,
+            actionBarContainer,
+          )
+        : null}
+    </>
   );
 }

apps/ui/src/pages/operation-create/page.tsx

@@ -1,5 +1,10 @@
 import { OperationForm } from "../../features/operation-form/operation-form";
 
 export function OperationCreatePage() {
-  return <OperationForm />;
+  return (
+    <div className="create-page-layout">
+      <OperationForm actionBarContainerId="operation-create-action-bar" />
+      <div className="sticky-action-bar-slot" id="operation-create-action-bar" />
+    </div>
+  );
 }

apps/ui/src/styles.css

@@ -398,6 +398,7 @@ button {
 .page-stack,
 .stack-layout,
 .builder-stack,
+.create-page-layout,
 .service-grid,
 .service-method-list {
   display: grid;
@@ -872,9 +873,7 @@ button {
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  width: calc(100% + 56px);
+  width: 100%;
-  margin-left: -28px;
-  margin-right: -28px;
   padding: 12px 28px;
   border-radius: 0;
   background: rgba(255, 255, 255, 0.9);
@@ -894,6 +893,10 @@ button {
   font-size: 12.5px;
 }
 
+.sticky-action-bar-slot {
+  width: 100%;
+}
+
 .field-error {
   color: #a1422c;
   font-size: 12px;
@@ -1162,9 +1165,6 @@ pre {
   }
 
   .sticky-action-bar {
-    width: calc(100% + 32px);
-    margin-left: -16px;
-    margin-right: -16px;
     padding-left: 16px;
     padding-right: 16px;
   }