Skip to content

Commit 81fb93c

Browse files
hoangsonwwclaude
hoangsonww
and
claude
committed
fix(ui): equal-height Workflow section cards (scatter matches compaction)
The Session Complexity Scatter card rendered shorter than its side-by-side companion (Compaction Impact Analysis) in the same lg:grid-cols-2 row. The grid stretches the Section wrapper to the tallest sibling, but the inner `.card` shrank to its content, so the shorter chart left a shorter card. Make Section a flex column with `h-full` and its card `flex-1` so the row-stretch reaches the card; the scatter fills its card and centers so the taller row height doesn't leave a gap. Applies to every Workflow section, so all side-by-side chart cards now align. Snapshot regenerated (className-only). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent da83609 commit 81fb93c

3 files changed

Lines changed: 55 additions & 25 deletions

File tree

‎client/src/components/workflows/SessionComplexityScatter.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,11 @@ export function SessionComplexityScatter({ data, onSessionClick }: SessionComple
326326
if (data.length === 0) return <EmptyState />;
327327

328328
return (
329-
<div ref={containerRef} className="w-full" onMouseLeave={handleMouseLeave}>
329+
<div
330+
ref={containerRef}
331+
className="w-full h-full flex flex-col justify-center"
332+
onMouseLeave={handleMouseLeave}
333+
>
330334
<svg
331335
ref={svgRef}
332336
width={width}

‎client/src/pages/Workflows.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,11 @@ function Section({
316316
children: React.ReactNode;
317317
}) {
318318
return (
319-
<div>
319+
// Flex column + a flex-1 card so that, when two Sections share a grid row
320+
// (lg:grid-cols-2), the grid's default row-stretch reaches the card itself —
321+
// otherwise a shorter chart (e.g. the Session Complexity Scatter) leaves its
322+
// card shorter than a taller companion (Compaction Impact) in the same row.
323+
<div className="flex flex-col h-full">
320324
<div className="flex items-center justify-between gap-4 mb-3">
321325
<div className="flex items-center gap-2.5 min-w-0">
322326
<span className="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0">
@@ -335,7 +339,7 @@ function Section({
335339
{subtitle}
336340
</span>
337341
</div>
338-
<div className="card p-4">{children}</div>
342+
<div className="card p-4 flex-1">{children}</div>
339343
</div>
340344
);
341345
}

‎client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap‎

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10681,7 +10681,9 @@ exports[`screen snapshots > Workflows 1`] = `
1068110681
</div>
1068210682
</div>
1068310683
</div>
10684-
<div>
10684+
<div
10685+
class="flex flex-col h-full"
10686+
>
1068510687
<div
1068610688
class="flex items-center justify-between gap-4 mb-3"
1068710689
>
@@ -10738,7 +10740,7 @@ exports[`screen snapshots > Workflows 1`] = `
1073810740
</span>
1073910741
</div>
1074010742
<div
10741-
class="card p-4"
10743+
class="card p-4 flex-1"
1074210744
>
1074310745
<div
1074410746
class="flex flex-col items-center justify-center py-20 text-center"
@@ -10795,7 +10797,9 @@ exports[`screen snapshots > Workflows 1`] = `
1079510797
</div>
1079610798
</div>
1079710799
</div>
10798-
<div>
10800+
<div
10801+
class="flex flex-col h-full"
10802+
>
1079910803
<div
1080010804
class="flex items-center justify-between gap-4 mb-3"
1080110805
>
@@ -10852,7 +10856,7 @@ exports[`screen snapshots > Workflows 1`] = `
1085210856
</span>
1085310857
</div>
1085410858
<div
10855-
class="card p-4"
10859+
class="card p-4 flex-1"
1085610860
>
1085710861
<div
1085810862
class="relative"
@@ -10984,7 +10988,9 @@ exports[`screen snapshots > Workflows 1`] = `
1098410988
</div>
1098510989
</div>
1098610990
</div>
10987-
<div>
10991+
<div
10992+
class="flex flex-col h-full"
10993+
>
1098810994
<div
1098910995
class="flex items-center justify-between gap-4 mb-3"
1099010996
>
@@ -11041,7 +11047,7 @@ exports[`screen snapshots > Workflows 1`] = `
1104111047
</span>
1104211048
</div>
1104311049
<div
11044-
class="card p-4"
11050+
class="card p-4 flex-1"
1104511051
>
1104611052
<div
1104711053
class="flex flex-col items-center justify-center py-16 text-center"
@@ -11062,7 +11068,9 @@ exports[`screen snapshots > Workflows 1`] = `
1106211068
<div
1106311069
class="grid grid-cols-1 lg:grid-cols-2 gap-6"
1106411070
>
11065-
<div>
11071+
<div
11072+
class="flex flex-col h-full"
11073+
>
1106611074
<div
1106711075
class="flex items-center justify-between gap-4 mb-3"
1106811076
>
@@ -11119,7 +11127,7 @@ exports[`screen snapshots > Workflows 1`] = `
1111911127
</span>
1112011128
</div>
1112111129
<div
11122-
class="card p-4"
11130+
class="card p-4 flex-1"
1112311131
>
1112411132
<div
1112511133
class="flex items-center justify-center py-16 text-gray-500 text-sm"
@@ -11128,7 +11136,9 @@ exports[`screen snapshots > Workflows 1`] = `
1112811136
</div>
1112911137
</div>
1113011138
</div>
11131-
<div>
11139+
<div
11140+
class="flex flex-col h-full"
11141+
>
1113211142
<div
1113311143
class="flex items-center justify-between gap-4 mb-3"
1113411144
>
@@ -11185,7 +11195,7 @@ exports[`screen snapshots > Workflows 1`] = `
1118511195
</span>
1118611196
</div>
1118711197
<div
11188-
class="card p-4"
11198+
class="card p-4 flex-1"
1118911199
>
1119011200
<div
1119111201
class="card p-5"
@@ -11236,7 +11246,9 @@ exports[`screen snapshots > Workflows 1`] = `
1123611246
<div
1123711247
class="grid grid-cols-1 lg:grid-cols-2 gap-6"
1123811248
>
11239-
<div>
11249+
<div
11250+
class="flex flex-col h-full"
11251+
>
1124011252
<div
1124111253
class="flex items-center justify-between gap-4 mb-3"
1124211254
>
@@ -11293,7 +11305,7 @@ exports[`screen snapshots > Workflows 1`] = `
1129311305
</span>
1129411306
</div>
1129511307
<div
11296-
class="card p-4"
11308+
class="card p-4 flex-1"
1129711309
>
1129811310
<div
1129911311
class="flex flex-col items-center justify-center py-16 gap-3 text-gray-500"
@@ -11324,7 +11336,9 @@ exports[`screen snapshots > Workflows 1`] = `
1132411336
</div>
1132511337
</div>
1132611338
</div>
11327-
<div>
11339+
<div
11340+
class="flex flex-col h-full"
11341+
>
1132811342
<div
1132911343
class="flex items-center justify-between gap-4 mb-3"
1133011344
>
@@ -11381,7 +11395,7 @@ exports[`screen snapshots > Workflows 1`] = `
1138111395
</span>
1138211396
</div>
1138311397
<div
11384-
class="card p-4"
11398+
class="card p-4 flex-1"
1138511399
>
1138611400
<div
1138711401
class="flex flex-col items-center justify-center py-16 gap-3"
@@ -11421,7 +11435,9 @@ exports[`screen snapshots > Workflows 1`] = `
1142111435
</div>
1142211436
</div>
1142311437
</div>
11424-
<div>
11438+
<div
11439+
class="flex flex-col h-full"
11440+
>
1142511441
<div
1142611442
class="flex items-center justify-between gap-4 mb-3"
1142711443
>
@@ -11478,7 +11494,7 @@ exports[`screen snapshots > Workflows 1`] = `
1147811494
</span>
1147911495
</div>
1148011496
<div
11481-
class="card p-4"
11497+
class="card p-4 flex-1"
1148211498
>
1148311499
<div
1148411500
class="flex flex-col items-center justify-center py-12 text-center"
@@ -11532,7 +11548,9 @@ exports[`screen snapshots > Workflows 1`] = `
1153211548
<div
1153311549
class="grid grid-cols-1 lg:grid-cols-2 gap-6"
1153411550
>
11535-
<div>
11551+
<div
11552+
class="flex flex-col h-full"
11553+
>
1153611554
<div
1153711555
class="flex items-center justify-between gap-4 mb-3"
1153811556
>
@@ -11589,7 +11607,7 @@ exports[`screen snapshots > Workflows 1`] = `
1158911607
</span>
1159011608
</div>
1159111609
<div
11592-
class="card p-4"
11610+
class="card p-4 flex-1"
1159311611
>
1159411612
<div
1159511613
class="flex flex-col items-center justify-center py-16 text-center"
@@ -11634,7 +11652,9 @@ exports[`screen snapshots > Workflows 1`] = `
1163411652
</div>
1163511653
</div>
1163611654
</div>
11637-
<div>
11655+
<div
11656+
class="flex flex-col h-full"
11657+
>
1163811658
<div
1163911659
class="flex items-center justify-between gap-4 mb-3"
1164011660
>
@@ -11691,7 +11711,7 @@ exports[`screen snapshots > Workflows 1`] = `
1169111711
</span>
1169211712
</div>
1169311713
<div
11694-
class="card p-4"
11714+
class="card p-4 flex-1"
1169511715
>
1169611716
<div
1169711717
class="flex flex-col items-center justify-center py-16 gap-3 text-gray-500"
@@ -11727,7 +11747,9 @@ exports[`screen snapshots > Workflows 1`] = `
1172711747
</div>
1172811748
</div>
1172911749
</div>
11730-
<div>
11750+
<div
11751+
class="flex flex-col h-full"
11752+
>
1173111753
<div
1173211754
class="flex items-center justify-between gap-4 mb-3"
1173311755
>
@@ -11784,7 +11806,7 @@ exports[`screen snapshots > Workflows 1`] = `
1178411806
</span>
1178511807
</div>
1178611808
<div
11787-
class="card p-4"
11809+
class="card p-4 flex-1"
1178811810
>
1178911811
<div
1179011812
class="flex flex-col py-6 px-4 border-2 border-dashed border-border rounded-xl"

0 commit comments

Comments
 (0)