LaLeV/wacrm
1
0
Fork 0
mirror of https://github.com/Luchexx/wacrm.git synced 2026-11-02 09:19:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(dashboard): pipeline card stretches to match the chart row height

Browse Source 
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>
This commit is contained in:
Arnas Donauskas 2026-04-17 22:29:54 +03:00
parent 3e02098579
commit 2954123d9b
No known key found for this signature in database
3 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(dashboard)/dashboard/page.tsx
View File

@ -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>

2
src/components/dashboard/conversations-chart.tsx
View File

@ -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>

2
src/components/dashboard/pipeline-donut.tsx
View File

@ -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">