QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-30 07:49:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(savings): rebalance spacing — moves the gap onto the grid, not the header

Browse Source 
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.
This commit is contained in:
Guillem Arias
2026-05-11 12:40:24 +02:00
parent 3734564c23
commit ffd72c0234
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/views/savings_goals/index.html.erb
View File

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