From 8a4521156b78d201bf35c9218b02173e8cde6e99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 7 Jul 2026 13:19:18 +0200
Subject: [PATCH] fix(dashboard): give the hero rings and sections room to
 breathe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On desktop the four rings sat 12px apart and the briefing section
followed the greeting row at the intra-block distance — the band read
top-heavy against its own symmetric padding. Rings now space at 24px
on md+ and the section gap steps up to match the card inset, so the
head zone and the briefing zone separate at the same rhythm the
padding sets.
---
 src/components/dashboard/hero/dashboard-hero.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/hero/dashboard-hero.tsx b/src/components/dashboard/hero/dashboard-hero.tsx
index 7845ef737..7bc821bb1 100644
--- a/src/components/dashboard/hero/dashboard-hero.tsx
+++ b/src/components/dashboard/hero/dashboard-hero.tsx
@@ -254,7 +254,10 @@ export function DashboardHero({
         "min-h-[8.75rem] p-4 md:min-h-[9.5rem] md:p-6",
       )}
     >
-      <div className="flex h-full flex-col gap-4">
+      {/* Vertical rhythm: the section gap (greeting/ring row → briefing)
+          reads one step larger than the intra-block spacing so the two
+          zones separate cleanly; the card's own padding stays symmetric. */}
+      <div className="flex h-full flex-col gap-4 md:gap-6">
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div className="min-w-0 flex-1 space-y-3">
             {/* Greeting leads the typographic hierarchy: larger + heavier
@@ -320,7 +323,7 @@ export function DashboardHero({
             collapses; missing selected rings render nothing. */}
           <div
             data-slot="dashboard-hero-rings"
-            className="flex shrink-0 flex-wrap items-center justify-center gap-3 md:justify-end"
+            className="flex shrink-0 flex-wrap items-center justify-center gap-4 md:justify-end md:gap-6"
           >
             {scoreRings.map((ring) => (
               <div