From cc46effc16db56df15c1e7e2035eed87e26eb68a Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 15:23:33 +0200
Subject: [PATCH] fix(savings_goals/new): name field uses .form-field wrapper
 for floating label

Drop the outer <label>Name</label> heading + label: false on the
text_field, and pass label: t(...) + container_class: "flex-1" so
styled_form_builder wraps the name input in Sure's standard .form-field
component. Label now sits inside the input box, matching the new
transaction modal pattern (and every other styled_form_with form across
Sure).

The avatar still sits as a sibling outside the box, flex-aligned center.
---
 app/views/savings_goals/_form_stepper.html.erb | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/views/savings_goals/_form_stepper.html.erb b/app/views/savings_goals/_form_stepper.html.erb
index 000fa9093..43451be8e 100644
--- a/app/views/savings_goals/_form_stepper.html.erb
+++ b/app/views/savings_goals/_form_stepper.html.erb
@@ -26,7 +26,6 @@
       </div>
 
       <div>
-        <label class="block text-sm font-medium text-primary mb-2"><%= t("savings_goals.form_stepper.step1.fields.name") %></label>
         <div class="flex items-center gap-2">
           <span class="shrink-0" data-savings-goal-stepper-target="avatarPreview">
             <%= render Savings::GoalAvatarComponent.new(name: savings_goal.name, color: savings_goal.color, size: "md") %>
@@ -34,8 +33,8 @@
           <%= f.text_field :name,
                            placeholder: t("savings_goals.form_stepper.step1.fields.name_placeholder"),
                            autofocus: true,
-                           label: false,
-                           class: "flex-1",
+                           label: t("savings_goals.form_stepper.step1.fields.name"),
+                           container_class: "flex-1",
                            data: { savings_goal_stepper_target: "nameInput", action: "input->savings-goal-stepper#nameChanged" } %>
         </div>
         <p class="hidden mt-1.5 text-xs text-destructive" data-savings-goal-stepper-target="nameError"><%= t("savings_goals.form_stepper.errors.name_required") %></p>