Merge pull request #43 from ArnasDon/fix/dashboard-pipeline-card-height

fix(dashboard): pipeline card stretches to match the chart row height
This commit is contained in:
Arnas Donauskas 2026-04-17 22:37:26 +03:00 committed by GitHub
commit b1eb02f48e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 4 deletions

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>

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>

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