From c7c48fde101197ac7db27fa6cd7d46dcf641dd8e Mon Sep 17 00:00:00 2001
From: DEls <davide.els1@outlook.com>
Date: Sun, 11 Oct 2026 04:12:31 +0200
Subject: [PATCH] fix(financial): keep each month's order and delivery bars
 side by side

The bars were capped at 36px but centred in half-month slots, so on a
wide screen a month's pair drifted ~65px apart. A fixed 32px bar with a
3px gap keeps them together (recharts still shrinks them if space runs
out).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/dashboard/financial/monthly-financial-chart.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/financial/monthly-financial-chart.tsx b/src/app/dashboard/financial/monthly-financial-chart.tsx
index 60f98e8..712fd5c 100644
--- a/src/app/dashboard/financial/monthly-financial-chart.tsx
+++ b/src/app/dashboard/financial/monthly-financial-chart.tsx
@@ -48,7 +48,7 @@ export function MonthlyFinancialChart({ months, undated }: {
             <div className="flex h-full items-center justify-center text-sm text-muted-foreground">Nothing recorded yet.</div>
           ) : (
             <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={months} accessibilityLayer margin={{ top: 12, right: 8, bottom: 0, left: 0 }}>
+              <BarChart data={months} accessibilityLayer barSize={32} barGap={3} margin={{ top: 12, right: 8, bottom: 0, left: 0 }}>
                 <CartesianGrid stroke="var(--border)" strokeDasharray="3 3" vertical={false} />
                 <XAxis dataKey="month" tickFormatter={(value: string) => format(parseISO(`${value}-01`), "MMM yy")}
                   stroke="var(--muted-foreground)" tickLine={false} axisLine={false} fontSize={11} minTickGap={16} />
@@ -59,8 +59,8 @@ export function MonthlyFinancialChart({ months, undated }: {
                   labelFormatter={(value) => format(parseISO(`${String(value)}-01`), "MMMM yyyy")}
                   formatter={(value: number) => formatCurrency(value)} />
                 <Legend iconType="circle" wrapperStyle={{ fontSize: 12 }} />
-                <Bar dataKey="poValue" name="Orders raised" fill={PO_COLOR} radius={[4, 4, 0, 0]} maxBarSize={36} isAnimationActive={false} />
-                <Bar dataKey="deliveryValue" name="Delivered" fill={DELIVERY_COLOR} radius={[4, 4, 0, 0]} maxBarSize={36} isAnimationActive={false} />
+                <Bar dataKey="poValue" name="Orders raised" fill={PO_COLOR} radius={[4, 4, 0, 0]} isAnimationActive={false} />
+                <Bar dataKey="deliveryValue" name="Delivered" fill={DELIVERY_COLOR} radius={[4, 4, 0, 0]} isAnimationActive={false} />
               </BarChart>
             </ResponsiveContainer>
           )}