From a4db186f1f19b39a8e60df7e01bf21ff7e468001 Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 15:44:15 +0200
Subject: [PATCH] fix(savings_goals/new): step 2 back button inline +
 form-field wrappers on initial-contribution inputs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DS::Button treats "hidden" as a display override class — adding
class: "hidden" stripped the base inline-flex display, so when Stimulus
later removed the hidden class the icon and text stacked vertically.
Wrap the Back button in a hidden <div> and toggle the wrapper instead;
the button keeps its inline-flex base.

The Amount + From-account inputs in step 2 used label_tag +
number_field_tag / select_tag directly with no .form-field wrapper, so
they rendered as bare inputs (same issue Name had in step 1). Wrap
each in .form-field > .form-field__body with form-field__label and
form-field__input classes — matches the styled_form_with pattern used
by Target amount / Target date in step 1.
---
 .../savings_goals/_form_stepper.html.erb      | 65 ++++++++++---------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/app/views/savings_goals/_form_stepper.html.erb b/app/views/savings_goals/_form_stepper.html.erb
index e272f4537..0c32fa646 100644
--- a/app/views/savings_goals/_form_stepper.html.erb
+++ b/app/views/savings_goals/_form_stepper.html.erb
@@ -132,44 +132,47 @@
           <%= icon("chevron-down", size: "sm") %>
         </summary>
         <div class="px-4 pb-4 space-y-3">
-          <div>
-            <%= label_tag "savings_goal[initial_contribution_amount]",
-                         t("savings_goals.form_stepper.step2.initial_amount"),
-                         class: "block text-sm text-secondary mb-1" %>
-            <%= number_field_tag "savings_goal[initial_contribution_amount]",
-                                 nil,
-                                 step: "0.01", min: "0",
-                                 autocomplete: "off",
-                                 class: "w-full",
-                                 data: { savings_goal_stepper_target: "initialContributionAmount" } %>
+          <div class="form-field">
+            <div class="form-field__body">
+              <%= label_tag "savings_goal[initial_contribution_amount]",
+                           t("savings_goals.form_stepper.step2.initial_amount"),
+                           class: "form-field__label" %>
+              <%= number_field_tag "savings_goal[initial_contribution_amount]",
+                                   nil,
+                                   step: "0.01", min: "0",
+                                   autocomplete: "off",
+                                   class: "form-field__input",
+                                   data: { savings_goal_stepper_target: "initialContributionAmount" } %>
+            </div>
           </div>
-          <div>
-            <%= label_tag "savings_goal[initial_contribution_account_id]",
-                         t("savings_goals.form_stepper.step2.initial_account"),
-                         class: "block text-sm text-secondary mb-1" %>
-            <%= select_tag "savings_goal[initial_contribution_account_id]",
-                           options_for_select([]),
-                           include_blank: t("savings_goals.form_stepper.step2.select_account"),
-                           data: { savings_goal_stepper_target: "initialContributionAccountSelect" },
-                           class: "w-full" %>
+          <div class="form-field">
+            <div class="form-field__body">
+              <%= label_tag "savings_goal[initial_contribution_account_id]",
+                           t("savings_goals.form_stepper.step2.initial_account"),
+                           class: "form-field__label" %>
+              <%= select_tag "savings_goal[initial_contribution_account_id]",
+                             options_for_select([]),
+                             include_blank: t("savings_goals.form_stepper.step2.select_account"),
+                             data: { savings_goal_stepper_target: "initialContributionAccountSelect" },
+                             class: "form-field__input" %>
+            </div>
           </div>
         </div>
       </details>
     </section>
 
     <div class="flex items-center justify-between pt-2">
-      <%= render DS::Button.new(
-        variant: "ghost",
-        text: t("savings_goals.form_stepper.back"),
-        icon: "arrow-left",
-        icon_position: :left,
-        class: "hidden",
-        data: {
-          savings_goal_stepper_target: "footerLeftButton",
-          action: "click->savings-goal-stepper#footerLeft"
-        }
-      ) %>
-      <span data-savings-goal-stepper-target="footerLeftPlaceholder"></span>
+      <div class="hidden" data-savings-goal-stepper-target="footerLeftButton">
+        <%= render DS::Button.new(
+          variant: "ghost",
+          text: t("savings_goals.form_stepper.back"),
+          icon: "arrow-left",
+          icon_position: :left,
+          data: {
+            action: "click->savings-goal-stepper#footerLeft"
+          }
+        ) %>
+      </div>
       <%= render DS::Button.new(
         text: t("savings_goals.form_stepper.continue"),
         variant: "primary",