feat: show goal progress bar inline in month header row

site/src/pages/support/index.astro

@@ -422,7 +422,10 @@ function renderBudget() {
     const header = document.createElement('button');
     header.className = 'w-full flex items-center gap-2 px-3 py-2.5 bg-zinc-900 hover:bg-zinc-800/60 transition-colors text-sm';
     header.innerHTML = `
-      <span class="font-medium text-white flex-1 text-left">${monthLabel(ym)}</span>
+      <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>`
+        : `<span class="flex-1"></span>`}
       <span class="text-xs text-green-400">+${fmtEur(donated)}</span>
       <span class="text-xs text-zinc-700">/</span>
       <span class="text-xs text-red-400">−${fmtEur(spent)}</span>
@@ -440,19 +443,6 @@ function renderBudget() {
       const detail = document.createElement('div');
       detail.className = 'border-t border-zinc-800';
 
-      if (pct !== null) {
-        const prog = document.createElement('div');
-        prog.className = 'px-3 py-2 border-b border-zinc-800';
-        prog.innerHTML = `
-          <div class="flex justify-between text-xs text-zinc-500 mb-1">
-            <span>Toward monthly goal</span><span>${pct}% of ${fmtEur(target!)}</span>
-          </div>
-          <div class="h-1.5 rounded-full bg-zinc-800 overflow-hidden">
-            <div class="h-full rounded-full" style="width:${pct}%;background:var(--accent)"></div>
-          </div>`;
-        detail.appendChild(prog);
-      }
-
       const entriesDiv = document.createElement('div');
       entriesDiv.className = 'divide-y divide-zinc-800/60';
       let entriesHtml = '';