From ffd72c0234435b2f4844388bdbd649d75e35216a Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 12:40:24 +0200
Subject: [PATCH] =?UTF-8?q?fix(savings):=20rebalance=20spacing=20=E2=80=94?=
 =?UTF-8?q?=20moves=20the=20gap=20onto=20the=20grid,=20not=20the=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous attempt put `mb-5` on the section header so the goal grid sat
~20px below it, but that also pushed the "No goals match" empty card
down because it shares the same header. Margin collapse meant the
empty card's own `mt-3` was getting added to the new big header `mb`.

Rework: header back to `mb-2.5`, grid gets `mt-3` of its own. Empty
card keeps its `mt-3`. Both children collapse to ~12px below the
header now, which matches the breathing room the empty card had before
this thread of edits.
---
 app/views/savings_goals/index.html.erb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/savings_goals/index.html.erb b/app/views/savings_goals/index.html.erb
index bd5f0a550..009e9c26e 100644
--- a/app/views/savings_goals/index.html.erb
+++ b/app/views/savings_goals/index.html.erb
@@ -106,12 +106,12 @@
       <% end %>
 
       <% if @active_goals.any? %>
-        <div class="flex items-center gap-1.5 mb-5 text-[11px] font-medium uppercase tracking-wide text-secondary">
+        <div class="flex items-center gap-1.5 mb-2.5 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="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
+        <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
           <% @active_goals.each do |goal| %>
             <%= render Savings::GoalCardComponent.new(goal: goal) %>
           <% end %>
@@ -128,12 +128,12 @@
 
     <% if @completed_goals.any? %>
       <section>
-        <div class="flex items-center gap-1.5 mb-5 text-[11px] font-medium uppercase tracking-wide text-secondary">
+        <div class="flex items-center gap-1.5 mb-2.5 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="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
+        <div class="mt-3 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 %>