From 41ffe10a7d7c86dfbcc773da00a76d8a8be198b1 Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 21:30:56 +0200
Subject: [PATCH] ux(goals): picker stacked above name field (stepper + edit)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously sat next to the name input via `flex items-start gap-3` so
the picker avatar competed with the input for horizontal space. Move
to its own row, centered (`flex justify-center`), positioned just
before the name field. Mirrors the categories form layout where the
avatar is the focal element above the name input.

Same change applied to the edit form: picker comes first, then name.
Stepper step 1 order is now: heading · picker · name · amount/date ·
funding accounts · notes.
---
 app/views/goals/_form_edit.html.erb    |  6 ++++--
 app/views/goals/_form_stepper.html.erb | 20 +++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/views/goals/_form_edit.html.erb b/app/views/goals/_form_edit.html.erb
index 236a3b3b7..ba088d055 100644
--- a/app/views/goals/_form_edit.html.erb
+++ b/app/views/goals/_form_edit.html.erb
@@ -8,6 +8,10 @@
                      url: goal_path(goal),
                      method: :patch,
                      class: "space-y-3" do |f| %>
+  <div class="flex justify-center">
+    <%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
+  </div>
+
   <%= f.text_field :name,
                    label: t("goals.form_stepper.step1.fields.name"),
                    required: true,
@@ -50,8 +54,6 @@
     </div>
   </div>
 
-  <%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
-
   <%= f.text_area :notes,
                   label: t("goals.form_stepper.step1.fields.notes"),
                   rows: 2 %>
diff --git a/app/views/goals/_form_stepper.html.erb b/app/views/goals/_form_stepper.html.erb
index 0e921ecc1..1951524b3 100644
--- a/app/views/goals/_form_stepper.html.erb
+++ b/app/views/goals/_form_stepper.html.erb
@@ -32,18 +32,16 @@
         <p class="text-sm text-secondary"><%= t("goals.form_stepper.step1.subheading") %></p>
       </div>
 
+      <div class="flex justify-center">
+        <%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
+      </div>
+
       <div>
-        <div class="flex items-start gap-3">
-          <div class="shrink-0 pt-6">
-            <%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
-          </div>
-          <%= f.text_field :name,
-                           placeholder: t("goals.form_stepper.step1.fields.name_placeholder"),
-                           autofocus: true,
-                           label: t("goals.form_stepper.step1.fields.name"),
-                           container_class: "flex-1",
-                           data: { goal_stepper_target: "nameInput", action: "input->goal-stepper#nameChanged" } %>
-        </div>
+        <%= f.text_field :name,
+                         placeholder: t("goals.form_stepper.step1.fields.name_placeholder"),
+                         autofocus: true,
+                         label: t("goals.form_stepper.step1.fields.name"),
+                         data: { goal_stepper_target: "nameInput", action: "input->goal-stepper#nameChanged" } %>
         <p class="hidden mt-1.5 text-xs text-destructive" data-goal-stepper-target="nameError"><%= t("goals.form_stepper.errors.name_required") %></p>
       </div>