From 7a8b6933f2031b18b4c956b5a1828bb401204f4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 7 Jun 2026 20:39:40 +0200
Subject: [PATCH] feat(insights): make the mood distribution and weekday charts
 more compact and calmer

Both charts derived their height off the full card width via aspect-[3/2],
which ballooned them on a wide viewport and let them dominate the mood
subpage. Bound each to a fixed 150px band so they read as tidy sibling
cards, and align the deferred-load skeletons to the same band.

Soften the saturated full-bleed mood hues to a muted tint (fillOpacity
0.55) so the bars sit calmly over the card while the per-level hue still
distinguishes the bands. On the weekday chart, drop the bright-green 3.5
target guide to a quiet comment-grey dashed line. The shared mood-level
tokens used by the heatmap and legend are untouched.
---
 .../insights/mood/mood-distribution-chart.tsx | 12 +++++++++-
 .../insights/mood/mood-insights-sections.tsx  |  8 ++-----
 .../insights/mood/mood-weekday-chart.tsx      | 22 ++++++++++++++++---
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/insights/mood/mood-distribution-chart.tsx b/src/components/insights/mood/mood-distribution-chart.tsx
index 7e2f39915..e9cdd5160 100644
--- a/src/components/insights/mood/mood-distribution-chart.tsx
+++ b/src/components/insights/mood/mood-distribution-chart.tsx
@@ -53,7 +53,10 @@ export function MoodDistributionChart({
   });
 
   return (
-    <div className="aspect-[3/2] min-h-[180px] w-full">
+    // v1.15.14 — bounded compact height (was `aspect-[3/2] min-h-[180px]`,
+    // which ballooned the card on a wide viewport). A fixed band keeps this a
+    // tidy card rather than a dominant block, and matches the weekday sibling.
+    <div className="h-[150px] w-full">
       <ResponsiveContainer width="100%" height="100%">
         <BarChart data={data} margin={{ top: 8, right: 12, bottom: 8, left: 0 }}>
           <XAxis
@@ -93,6 +96,13 @@ export function MoodDistributionChart({
             // than a missing slot. The coloured bar paints over the track
             // for non-empty levels.
             background={{ fill: "var(--secondary)", opacity: 0.35, radius: 3 }}
+            // v1.15.14 — the saturated full-bleed mood hues read as
+            // "erschlagend"; soften every bar to a muted tint of its level
+            // colour. The hue (= mood-level semantics) still distinguishes the
+            // bands, but the fill sits calmly over the card rather than
+            // shouting. Scoped to this chart only — the shared `--dracula-*`
+            // mood tokens (heatmap, legend) are untouched.
+            fillOpacity={0.55}
           >
             {data.map((row) => (
               <Cell
diff --git a/src/components/insights/mood/mood-insights-sections.tsx b/src/components/insights/mood/mood-insights-sections.tsx
index 137b194eb..aa59d614d 100644
--- a/src/components/insights/mood/mood-insights-sections.tsx
+++ b/src/components/insights/mood/mood-insights-sections.tsx
@@ -43,9 +43,7 @@ const MoodDistributionChart = dynamic(
     })),
   {
     ssr: false,
-    loading: () => (
-      <Skeleton className="aspect-[3/2] min-h-[180px] w-full rounded-md" />
-    ),
+    loading: () => <Skeleton className="h-[150px] w-full rounded-md" />,
   },
 );
 const MoodWeekdayChart = dynamic(
@@ -55,9 +53,7 @@ const MoodWeekdayChart = dynamic(
     })),
   {
     ssr: false,
-    loading: () => (
-      <Skeleton className="aspect-[3/2] min-h-[160px] w-full rounded-md" />
-    ),
+    loading: () => <Skeleton className="h-[150px] w-full rounded-md" />,
   },
 );
 const MoodTimeOfDayChart = dynamic(
diff --git a/src/components/insights/mood/mood-weekday-chart.tsx b/src/components/insights/mood/mood-weekday-chart.tsx
index 3842a64cc..ab0e1777f 100644
--- a/src/components/insights/mood/mood-weekday-chart.tsx
+++ b/src/components/insights/mood/mood-weekday-chart.tsx
@@ -73,7 +73,11 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) {
 
   return (
     <div className="space-y-2">
-      <div className="aspect-[3/2] min-h-[160px] w-full">
+      {/* v1.15.14 — bounded compact height (was `aspect-[3/2] min-h-[160px]`,
+          which derived its height off the full card width and ballooned on a
+          wide viewport). A fixed band keeps it a tidy card matching the
+          distribution sibling. */}
+      <div className="h-[150px] w-full">
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={data}
@@ -92,7 +96,15 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) {
               stroke="var(--dracula-comment)"
               width={24}
             />
-            <ReferenceLine y={3.5} stroke="var(--dracula-green)" strokeDasharray="3 3" />
+            {/* v1.15.14 — calmer target guide: a muted comment-grey dashed
+                line instead of the bright green, so it reads as a quiet
+                reference rather than competing with the bars. */}
+            <ReferenceLine
+              y={3.5}
+              stroke="var(--dracula-comment)"
+              strokeDasharray="3 3"
+              strokeOpacity={0.6}
+            />
             <Tooltip
               cursor={{ fill: "var(--secondary)", opacity: 0.4 }}
               contentStyle={{
@@ -116,7 +128,11 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) {
                 ];
               }}
             />
-            <Bar dataKey="value" radius={[3, 3, 0, 0]}>
+            {/* v1.15.14 — soften the saturated mood hues to a muted tint
+                (the level semantics still distinguish the bars; the fill no
+                longer shouts). Scoped here — the shared `--dracula-*` mood
+                tokens used by the heatmap/legend stay untouched. */}
+            <Bar dataKey="value" radius={[3, 3, 0, 0]} fillOpacity={0.55}>
               {data.map((row) => (
                 <Cell
                   key={row.weekday}