From 638749c1d5e916a5cd87a29e386cd7e0dc9a3d5f Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 12:48:52 +0200
Subject: [PATCH] fix(savings_goals): equalize ONGOING/COMPLETED header spacing
 across cards and empty state

Move section gap from per-child mt-3 to a single mb-4 on the header, and
toggle the grid wrapper hidden when no cards are visible. The previous
markup gave inconsistent ONGOING-tag-to-content distance because the
empty card sat below a 0-height grid, stacking margins differently than
the cards layout.
---
 .../controllers/savings_goals_filter_controller.js     |  5 ++++-
 app/views/savings_goals/index.html.erb                 | 10 +++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/javascript/controllers/savings_goals_filter_controller.js b/app/javascript/controllers/savings_goals_filter_controller.js
index 23558d511..10c7d6382 100644
--- a/app/javascript/controllers/savings_goals_filter_controller.js
+++ b/app/javascript/controllers/savings_goals_filter_controller.js
@@ -5,7 +5,7 @@ import { Controller } from "@hotwired/stimulus";
 // and data-goal-status; the controller toggles `.hidden` on cards
 // based on the active query/chip.
 export default class extends Controller {
-  static targets = ["input", "chip", "card", "empty"];
+  static targets = ["input", "chip", "card", "empty", "grid"];
   static values = { status: { type: String, default: "all" } };
 
   connect() {
@@ -32,6 +32,9 @@ export default class extends Controller {
     if (this.hasEmptyTarget) {
       this.emptyTarget.classList.toggle("hidden", visible > 0);
     }
+    if (this.hasGridTarget) {
+      this.gridTarget.classList.toggle("hidden", visible === 0);
+    }
   }
 
   selectChip(event) {
diff --git a/app/views/savings_goals/index.html.erb b/app/views/savings_goals/index.html.erb
index 009e9c26e..6a53f06e0 100644
--- a/app/views/savings_goals/index.html.erb
+++ b/app/views/savings_goals/index.html.erb
@@ -106,17 +106,17 @@
       <% end %>
 
       <% if @active_goals.any? %>
-        <div class="flex items-center gap-1.5 mb-2.5 text-[11px] font-medium uppercase tracking-wide text-secondary">
+        <div class="flex items-center gap-1.5 mb-4 text-[11px] font-medium uppercase tracking-wide text-secondary">
           <span><%= t(".ongoing_section.heading") %></span>
           <span class="text-subdued">·</span>
           <span class="tabular-nums"><%= @active_goals.size %></span>
         </div>
-        <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5" data-savings-goals-filter-target="grid">
           <% @active_goals.each do |goal| %>
             <%= render Savings::GoalCardComponent.new(goal: goal) %>
           <% end %>
         </div>
-        <div class="hidden bg-container rounded-xl shadow-border-xs py-10 text-center mt-3" data-savings-goals-filter-target="empty">
+        <div class="hidden bg-container rounded-xl shadow-border-xs py-10 text-center" data-savings-goals-filter-target="empty">
           <p class="text-sm text-secondary"><%= t(".search.empty") %></p>
         </div>
       <% else %>
@@ -128,12 +128,12 @@
 
     <% if @completed_goals.any? %>
       <section>
-        <div class="flex items-center gap-1.5 mb-2.5 text-[11px] font-medium uppercase tracking-wide text-secondary">
+        <div class="flex items-center gap-1.5 mb-4 text-[11px] font-medium uppercase tracking-wide text-secondary">
           <span><%= t(".completed_section.heading") %></span>
           <span class="text-subdued">·</span>
           <span class="tabular-nums"><%= @completed_goals.size %></span>
         </div>
-        <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
           <% @completed_goals.each do |goal| %>
             <%= render Savings::GoalCardComponent.new(goal: goal) %>
           <% end %>