ux(goals): picker stacked above name field (stepper + edit)

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

@@ -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 %>