From 2954123d9bfdd6b534ccb0fdac8373f8fcf45442 Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Fri, 17 Apr 2026 22:29:54 +0300
Subject: [PATCH] fix(dashboard): pipeline card stretches to match the chart
 row height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With grid items-stretch (the default) the two cards in the charts
row try to share the tallest sibling's height — but the Pipeline
Value card was rendering at its natural (shorter) height because
neither its col-wrapper nor its inner section had h-full. So the
line chart's taller content drove the row but the pipeline card
hung at the top with trailing whitespace.

Added h-full on both col wrappers and flex h-full flex-col on
each inner section so they actually fill the row. The existing
flex-1 wrapper inside PipelineDonut now has a defined height to
stretch against, so the empty state (and the populated donut +
legend) span the card cleanly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/(dashboard)/dashboard/page.tsx           | 10 ++++++++--
 src/components/dashboard/conversations-chart.tsx |  2 +-
 src/components/dashboard/pipeline-donut.tsx      |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx
index bf68834..a9d0851 100644
--- a/src/app/(dashboard)/dashboard/page.tsx
+++ b/src/app/(dashboard)/dashboard/page.tsx
@@ -177,8 +177,14 @@ export default function DashboardPage() {
       <QuickActions />
 
       {/* Charts row */}
+      {/* items-stretch (the grid default) stretches the two columns to
+          match the tallest sibling; adding h-full on each wrapper and
+          on the inner panels makes both cards actually fill that
+          stretched height so their rounded borders line up. Without
+          this, the pipeline card rendered at its natural (shorter)
+          height while the line chart drove the row height. */}
       <div className="grid grid-cols-1 gap-4 lg:grid-cols-5">
-        <div className="lg:col-span-3">
+        <div className="h-full lg:col-span-3">
           <ConversationsChart
             series={series}
             loading={seriesLoading}
@@ -186,7 +192,7 @@ export default function DashboardPage() {
             onRangeChange={handleRangeChange}
           />
         </div>
-        <div className="lg:col-span-2">
+        <div className="h-full lg:col-span-2">
           <PipelineDonut data={pipeline} loading={pipelineLoading} />
         </div>
       </div>
diff --git a/src/components/dashboard/conversations-chart.tsx b/src/components/dashboard/conversations-chart.tsx
index 458db7a..f234820 100644
--- a/src/components/dashboard/conversations-chart.tsx
+++ b/src/components/dashboard/conversations-chart.tsx
@@ -46,7 +46,7 @@ export function ConversationsChart({ series, loading, range, onRangeChange }: Co
   }, [data])
 
   return (
-    <section className="rounded-xl border border-slate-800 bg-slate-900">
+    <section className="flex h-full flex-col rounded-xl border border-slate-800 bg-slate-900">
       <header className="flex items-center justify-between border-b border-slate-800 px-5 py-4">
         <div>
           <h2 className="text-sm font-semibold text-white">Conversations Over Time</h2>
diff --git a/src/components/dashboard/pipeline-donut.tsx b/src/components/dashboard/pipeline-donut.tsx
index 4a9854a..7391cee 100644
--- a/src/components/dashboard/pipeline-donut.tsx
+++ b/src/components/dashboard/pipeline-donut.tsx
@@ -12,7 +12,7 @@ interface PipelineDonutProps {
 
 export function PipelineDonut({ data, loading }: PipelineDonutProps) {
   return (
-    <section className="flex flex-col rounded-xl border border-slate-800 bg-slate-900">
+    <section className="flex h-full flex-col rounded-xl border border-slate-800 bg-slate-900">
       <header className="border-b border-slate-800 px-5 py-4">
         <h2 className="text-sm font-semibold text-white">Pipeline Value</h2>
         <p className="mt-0.5 text-xs text-slate-500">