From 29eb1dfcdcf570a192bbee0cdeadaca3c2221cef Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Wed, 3 Jun 2026 23:55:52 +0200
Subject: [PATCH] feat: show percentage next to progress bar in month header

---
 site/src/pages/support/index.astro | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/support/index.astro b/site/src/pages/support/index.astro
index 7451555..d86caf4 100644
--- a/site/src/pages/support/index.astro
+++ b/site/src/pages/support/index.astro
@@ -424,13 +424,13 @@ function renderBudget() {
     header.innerHTML = `
       <span class="font-medium text-white shrink-0">${monthLabel(ym)}</span>
       ${pct !== null
-        ? `<div class="flex-1 mx-2 h-1.5 rounded-full bg-zinc-800 overflow-hidden"><div class="h-full rounded-full" style="width:${pct}%;background:var(--accent)"></div></div>`
+        ? `<div class="flex-1 mx-2 flex items-center gap-1.5"><div class="flex-1 h-1.5 rounded-full bg-zinc-800 overflow-hidden"><div class="h-full rounded-full" style="width:${pct}%;background:var(--accent)"></div></div><span class="text-xs text-zinc-500 shrink-0">${pct}%</span></div>`
         : `<span class="flex-1"></span>`}
-      <span class="text-xs text-green-400">+${fmtEur(donated)}</span>
+      <span class="text-xs text-green-400"><span class="hidden sm:inline text-zinc-600 mr-0.5">donated</span>+${fmtEur(donated)}</span>
       <span class="text-xs text-zinc-700">/</span>
-      <span class="text-xs text-red-400">−${fmtEur(spent)}</span>
+      <span class="text-xs text-red-400"><span class="hidden sm:inline text-zinc-600 mr-0.5">spent</span>−${fmtEur(spent)}</span>
       <span class="text-xs text-zinc-700">/</span>
-      <span class="text-xs ${balance >= 0 ? 'text-zinc-300' : 'text-red-400'}">${balance >= 0 ? '+' : '−'}${fmtEur(Math.abs(balance))}</span>
+      <span class="text-xs ${balance >= 0 ? 'text-zinc-300' : 'text-red-400'}"><span class="hidden sm:inline text-zinc-600 mr-0.5">balance</span>${balance >= 0 ? '+' : '−'}${fmtEur(Math.abs(balance))}</span>
       <span class="text-zinc-600 text-xs ml-1">${open ? '▲' : '▼'}</span>`;
     header.addEventListener('click', () => {
       if (expandedMonths.has(ym)) expandedMonths.delete(ym); else expandedMonths.add(ym);