From d46c3d4163c2a7ff9c282907e2c296c689ba3971 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 4 Sep 2025 15:59:56 -0500
Subject: [PATCH] Improve the /new view so creating workflows feels seamless

---
 app/views/workflows/_workflow.html.erb |  2 +-
 app/views/workflows/new.html.erb       | 21 ++++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/views/workflows/_workflow.html.erb b/app/views/workflows/_workflow.html.erb
index 3c19658ed..a5362a032 100644
--- a/app/views/workflows/_workflow.html.erb
+++ b/app/views/workflows/_workflow.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag workflow do %>
-  <article class="panel" style="--panel-size: 40ch;">
+  <article class="panel" style="--panel-size: 40ch;" style="view-transition-name: <%= dom_id(workflow) %>">
     <div class="flex gap-half align-center justify-starts">
       <%= turbo_frame_tag dom_id(workflow, :header) do %>
         <%= link_to edit_workflow_path(workflow) do %>
diff --git a/app/views/workflows/new.html.erb b/app/views/workflows/new.html.erb
index 2fc3e1de4..cec65033f 100644
--- a/app/views/workflows/new.html.erb
+++ b/app/views/workflows/new.html.erb
@@ -1,17 +1,20 @@
-<% @page_title = "Create a new Workflow" %>
+<% @page_title = "Workflows" %>
 
 <% content_for :header do %>
   <%= render "filters/menu", user_filtering: @user_filtering %>
   <h1 class="header__title"><%= @page_title %></h1>
 <% end %>
 
-<article class="panel center margin-block-start flex flex-column gap" style="view-transition-name: <%= dom_id(@workflow) %>">
-  <%= form_with model: @workflow, url: workflows_path, data: { controller: "form" } do |form| %>
-    <%= form.text_field :name, required: true, autofocus: true, class: "input txt-large", placeholder: "Name your Workflow…", data: { action: "keydown.esc@document->form#cancel" } %>
-    <%= form.button type: :submit, class: "btn btn--reversed center margin-block-start txt-large" do %>
-      <%= icon_tag "check" %>
-      <span class="for-screen-reader">Create Workflow</span>
+<article class="panel center" style="--panel-size: 40ch;" style="view-transition-name: <%= dom_id(@workflow) %>">
+  <div class="flex gap-half align-center justify-starts">
+    <%= form_with model: @workflow, url: workflows_path, data: { controller: "form" } do |form| %>
+      <h2 class="txt-large margin-none">
+        <%= form.text_field :name, required: true, autofocus: true, class: "input", placeholder: "Name your Workflow…", data: { action: "keydown.esc@document->form#cancel" } %>
+      </h2>
+      <%= form.button type: :submit, class: "btn btn--reversed center margin-block-start txt-medium" do %>
+        <span>Create Workflow</span>
+      <% end %>
+      <%= link_to "Go back", workflows_path, data: { form_target: "cancel" }, hidden: true %>
     <% end %>
-    <%= link_to "Go back", workflows_path, data: { form_target: "cancel" }, hidden: true %>
-  <% end %>
+  </div>
 </article>