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,8 +347,10 @@ export function OperationForm() {
   }
 
   return (
+    <>
       <form
         className="builder-stack"
+        id="operation-create-form"
         onSubmit={form.handleSubmit((values) => {
           creationMutation.mutate(values);
         })}
@@ -504,16 +514,27 @@ export function OperationForm() {
           </div>
         ) : null}
         </div>
+      </form>
 
+      {actionBarContainer
+        ? createPortal(
             <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}>
+              <button
+                className="button-primary button-primary-strong"
+                type="submit"
+                form="operation-create-form"
+                disabled={creationMutation.isPending}
+              >
                 {creationMutation.isPending ? "Creating..." : "Create operation"}
               </button>
-      </div>
+            </div>,
-    </form>
+            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;
   }