fix: refine create page layout spacing

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

@@ -345,6 +345,7 @@ export function OperationForm() {
         creationMutation.mutate(values);
       })}
     >
+      <div className="builder-content">
         <section className="builder-card">
           <header className="builder-card-header">
             <div>
@@ -429,7 +430,8 @@ export function OperationForm() {
                   />
                 </label>
               ) : null}
-            {activeProtocol === "rest" ? renderField({
+              {activeProtocol === "rest"
+                ? renderField({
                     name: "restStaticHeadersText",
                     label: "Static headers",
                     description:
@@ -437,7 +439,8 @@ export function OperationForm() {
                     rows: 8,
                     wide: true,
                     code: true,
-            }) : null}
+                  })
+                : null}
             </div>
 
             <div className="info-banner">
@@ -466,7 +469,10 @@ export function OperationForm() {
           <header className="builder-card-header">
             <div>
               <h2>5 — Mapping and execution</h2>
-            <p>Translate MCP input to request fields, then map upstream output back to tool output.</p>
+              <p>
+                Translate MCP input to request fields, then map upstream output back to tool
+                output.
+              </p>
             </div>
           </header>
           <div className="builder-card-body">
@@ -497,6 +503,7 @@ export function OperationForm() {
               : "Failed to create operation"}
           </div>
         ) : null}
+      </div>
 
       <div className="sticky-action-bar">
         <div className="sticky-action-copy">

apps/ui/src/shared/ui/app-shell.tsx

@@ -60,6 +60,7 @@ export function AppShell({ children }: AppShellProps) {
           <p className="sidebar-label">Workspace</p>
           <nav className="sidebar-nav">
             <NavLink
+              end
               to="/operations"
               className={({ isActive }) =>
                 isActive ? "nav-link nav-link-active" : "nav-link"

apps/ui/src/styles.css

@@ -324,7 +324,8 @@ button {
 }
 
 .page-header {
-  margin-bottom: 24px;
+  max-width: 1240px;
+  margin: 0 auto 24px;
 }
 
 .page-header h1 {
@@ -405,7 +406,14 @@ button {
 
 .builder-stack {
   width: 100%;
-  max-width: 1320px;
+}
+
+.builder-content {
+  width: 100%;
+  max-width: 1240px;
+  margin: 0 auto;
+  display: grid;
+  gap: 16px;
 }
 
 .page-section,
@@ -470,6 +478,11 @@ button {
   padding: 0 24px 24px;
 }
 
+.builder-content .form-grid {
+  grid-template-columns: repeat(2, minmax(280px, 420px));
+  justify-content: space-between;
+}
+
 .proto-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -859,8 +872,9 @@ button {
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 12px 20px;
-  border-radius: var(--radius-xl);
+  width: 100%;
+  padding: 12px 28px;
+  border-radius: 0;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(16px);
   border: 1px solid var(--border);
@@ -1114,7 +1128,7 @@ pre {
     padding: 20px;
   }
 
-  .builder-stack {
+  .builder-content {
     max-width: none;
   }
 }
@@ -1144,4 +1158,9 @@ pre {
     padding-left: 16px;
     padding-right: 16px;
   }
+
+  .sticky-action-bar {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
 }