From 9b70f0385c9a44bfc79cdcaa43610a88f13bc4ea Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 12:28:34 +0200
Subject: [PATCH] fix(savings): refine hero spacing, goal/account card padding,
 sparkline negative range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sparkline (`savings-sparkline` controller): dropped the `Math.max(0,
  yMin)` clamp on the y-axis domain so negative balances (or any series
  that dips into negative territory) render fully instead of being
  cropped off the canvas.
- Hero card: padding `p-6` → `p-7`, column ratio
  `[minmax(0,1fr)_minmax(0,1.6fr)]` so the chart breathes, min height
  bumped to 220px, sparkline container `h-full min-h-[200px]` so it
  fills the card vertically. Stats row now sits at the bottom of the
  text column via `mt-auto pt-6`; labels promoted to `text-xs`, values
  to `text-lg`.
- Section vertical rhythm: outer `space-y-6` → `space-y-8`.
- Goal card: padding `p-[18px]` → `p-6`. Internal gap from header row
  to amount line `mt-3.5` → `mt-5`. Account-row gap `mt-3` → `mt-4`.
- Account card: padding `p-5` → `p-6`.
- Status pill "Behind" dot: `bg-yellow-500` → `bg-yellow-600` for a
  warmer/ambery tone matching the Claude Design reference.
- Goal card donut "behind" stroke: `var(--color-yellow-500)` →
  `var(--color-yellow-600)` to match the pill.
---
 .../savings/account_card_component.html.erb   |  2 +-
 .../savings/goal_card_component.html.erb      |  6 +++---
 app/components/savings/goal_card_component.rb |  2 +-
 .../savings/status_pill_component.rb          |  2 +-
 .../savings_sparkline_controller.js           |  7 +++++--
 app/views/savings_goals/index.html.erb        | 20 +++++++++----------
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/app/components/savings/account_card_component.html.erb b/app/components/savings/account_card_component.html.erb
index ff62bcdc3..85927b39c 100644
--- a/app/components/savings/account_card_component.html.erb
+++ b/app/components/savings/account_card_component.html.erb
@@ -1,4 +1,4 @@
-<div class="bg-container rounded-xl shadow-border-xs p-5">
+<div class="bg-container rounded-xl shadow-border-xs p-6">
   <div class="flex items-center gap-3 mb-3">
     <span class="inline-flex items-center justify-center w-9 h-9 rounded-full text-inverse text-sm font-semibold"
           style="background-color: var(--color-blue-500);">
diff --git a/app/components/savings/goal_card_component.html.erb b/app/components/savings/goal_card_component.html.erb
index e2409047a..e15f2f998 100644
--- a/app/components/savings/goal_card_component.html.erb
+++ b/app/components/savings/goal_card_component.html.erb
@@ -1,5 +1,5 @@
 <%= link_to savings_goal_path(goal),
-            class: "group block bg-container rounded-xl shadow-border-xs hover:bg-surface-hover transition-colors p-[18px]",
+            class: "group block bg-container rounded-xl shadow-border-xs hover:bg-surface-hover transition-colors p-6",
             data: {
               savings_goals_filter_target: "card",
               goal_name: goal.name,
@@ -40,14 +40,14 @@
     </div>
   </div>
 
-  <div class="mt-3.5">
+  <div class="mt-5">
     <div class="flex items-baseline gap-1.5">
       <span class="text-lg font-medium text-primary tabular-nums privacy-sensitive"><%= goal.current_balance_money.format %></span>
       <span class="text-xs text-subdued tabular-nums">/ <%= goal.target_amount_money.format %></span>
     </div>
   </div>
 
-  <div class="mt-3 flex items-center justify-between">
+  <div class="mt-4 flex items-center justify-between">
     <div class="flex items-center gap-2">
       <%= render Savings::AccountStackComponent.new(accounts: linked_accounts) %>
       <span class="text-[11px] text-subdued"><%= linked_accounts_count_label %></span>
diff --git a/app/components/savings/goal_card_component.rb b/app/components/savings/goal_card_component.rb
index fb3c52795..667397e3a 100644
--- a/app/components/savings/goal_card_component.rb
+++ b/app/components/savings/goal_card_component.rb
@@ -15,7 +15,7 @@ class Savings::GoalCardComponent < ApplicationComponent
   def ring_color
     case goal.status
     when :reached then "var(--color-green-600)"
-    when :behind then "var(--color-yellow-500)"
+    when :behind then "var(--color-yellow-600)"
     when :on_track then "var(--text-primary)"
     else "var(--text-subdued)"
     end
diff --git a/app/components/savings/status_pill_component.rb b/app/components/savings/status_pill_component.rb
index 8adbb6378..d200f3833 100644
--- a/app/components/savings/status_pill_component.rb
+++ b/app/components/savings/status_pill_component.rb
@@ -1,7 +1,7 @@
 class Savings::StatusPillComponent < ApplicationComponent
   VARIANTS = {
     on_track: { classes: "bg-green-500/10 text-success", dot: "bg-green-600" },
-    behind: { classes: "bg-yellow-500/10 text-warning", dot: "bg-yellow-500" },
+    behind: { classes: "bg-yellow-500/10 text-warning", dot: "bg-yellow-600" },
     reached: { classes: "bg-green-500/10 text-success", dot: "bg-green-600" },
     no_target_date: { classes: "bg-surface-inset text-secondary", dot: "bg-gray-400" }
   }.freeze
diff --git a/app/javascript/controllers/savings_sparkline_controller.js b/app/javascript/controllers/savings_sparkline_controller.js
index e0ea79e14..2b0912a4b 100644
--- a/app/javascript/controllers/savings_sparkline_controller.js
+++ b/app/javascript/controllers/savings_sparkline_controller.js
@@ -42,10 +42,13 @@ export default class extends Controller {
 
     const yMin = Math.min(...series.map((d) => d.value));
     const yMax = Math.max(...series.map((d) => d.value));
-    const padding = (yMax - yMin) * 0.15 || yMax * 0.05 || 1;
+    // Don't clamp to 0 — savings totals can be negative under certain
+    // demo / edge conditions, and clamping pushes the line off-canvas.
+    const range = yMax - yMin;
+    const padding = range > 0 ? range * 0.15 : Math.abs(yMax) * 0.05 || 1;
     const y = d3
       .scaleLinear()
-      .domain([Math.max(0, yMin - padding), yMax + padding])
+      .domain([yMin - padding, yMax + padding])
       .range([margin.top + innerHeight, margin.top]);
 
     const svg = d3
diff --git a/app/views/savings_goals/index.html.erb b/app/views/savings_goals/index.html.erb
index 8ae292476..cb78e01a3 100644
--- a/app/views/savings_goals/index.html.erb
+++ b/app/views/savings_goals/index.html.erb
@@ -1,4 +1,4 @@
-<div class="space-y-6">
+<div class="space-y-8">
   <header>
     <h1 class="text-2xl font-semibold text-primary"><%= t(".title") %></h1>
     <p class="text-sm text-secondary mt-1"><%= t(".subtitle") %></p>
@@ -8,7 +8,7 @@
     <%= render "empty_state", linkable_account_count: @linkable_account_count %>
   <% else %>
     <%# Hero card %>
-    <section class="bg-container rounded-xl shadow-border-xs p-6 grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)] gap-6 items-stretch">
+    <section class="bg-container rounded-xl shadow-border-xs p-7 grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.6fr)] gap-6 items-stretch min-h-[220px]">
       <div class="flex flex-col">
         <p class="text-xs text-secondary"><%= t(".hero.total_in_savings") %></p>
         <p class="text-4xl font-medium text-primary tabular-nums mt-1 privacy-sensitive"><%= @hero[:total_savings_money].format %></p>
@@ -19,24 +19,24 @@
           </p>
         <% end %>
 
-        <div class="grid grid-cols-3 gap-6 mt-6">
+        <div class="grid grid-cols-3 gap-6 mt-auto pt-6">
           <div>
-            <p class="text-[11px] text-secondary"><%= t(".hero.accounts") %></p>
-            <p class="text-base font-medium text-primary mt-0.5 tabular-nums"><%= @hero[:accounts_count] %></p>
+            <p class="text-xs text-secondary"><%= t(".hero.accounts") %></p>
+            <p class="text-lg font-medium text-primary mt-1 tabular-nums"><%= @hero[:accounts_count] %></p>
           </div>
           <div>
-            <p class="text-[11px] text-secondary"><%= t(".hero.active_goals") %></p>
-            <p class="text-base font-medium text-primary mt-0.5 tabular-nums"><%= @hero[:active_goals_count] %></p>
+            <p class="text-xs text-secondary"><%= t(".hero.active_goals") %></p>
+            <p class="text-lg font-medium text-primary mt-1 tabular-nums"><%= @hero[:active_goals_count] %></p>
           </div>
           <div>
-            <p class="text-[11px] text-secondary"><%= t(".hero.saved_toward_goals") %></p>
-            <p class="text-base font-medium text-primary mt-0.5 tabular-nums privacy-sensitive"><%= @hero[:saved_toward_goals_money].format %></p>
+            <p class="text-xs text-secondary"><%= t(".hero.saved_toward_goals") %></p>
+            <p class="text-lg font-medium text-primary mt-1 tabular-nums privacy-sensitive"><%= @hero[:saved_toward_goals_money].format %></p>
           </div>
         </div>
       </div>
 
       <% if @hero[:sparkline_series].size >= 2 %>
-        <div class="min-h-[160px]"
+        <div class="h-full min-h-[200px]"
              data-controller="savings-sparkline"
              data-savings-sparkline-series-value="<%= @hero[:sparkline_series].to_json %>"></div>
       <% end %>