From 99161f1b47007d4aef33a233119ac8fcf0a530bc Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 11 Mar 2026 22:15:53 +0800
Subject: [PATCH] Fix Upcoming card height constraint with flex column +
 maxHeight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: h-full on Card inside a flex-col parent with no explicit
height meant nothing constrained the card — ScrollArea max-h never
triggered overflow. Fix: Card uses maxHeight 520px as the outer cap,
flex-col layout with shrink-0 header, and min-h-0 on CardContent +
ScrollArea so the flex chain allows content to shrink and scroll.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/dashboard/UpcomingWidget.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/dashboard/UpcomingWidget.tsx b/frontend/src/components/dashboard/UpcomingWidget.tsx
index a60737d..1a9ad86 100644
--- a/frontend/src/components/dashboard/UpcomingWidget.tsx
+++ b/frontend/src/components/dashboard/UpcomingWidget.tsx
@@ -174,8 +174,8 @@ export default function UpcomingWidget({ items }: UpcomingWidgetProps) {
   const dayEntries = Array.from(grouped.entries());
 
   return (
-    <Card className="h-full">
-      <CardHeader>
+    <Card className="flex flex-col" style={{ maxHeight: '520px' }}>
+      <CardHeader className="shrink-0">
         <div className="flex items-center justify-between">
           <CardTitle className="flex items-center gap-2">
             <div className="p-1.5 rounded-md bg-accent/10">
@@ -210,13 +210,13 @@ export default function UpcomingWidget({ items }: UpcomingWidgetProps) {
           </div>
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex-1 min-h-0 flex flex-col">
         {filteredCount === 0 ? (
           <p className="text-sm text-muted-foreground text-center py-8">
             {focusMode ? 'Nothing for today or tomorrow' : 'Nothing upcoming'}
           </p>
         ) : (
-          <ScrollArea className="max-h-[400px] -mr-2 pr-2">
+          <ScrollArea className="flex-1 min-h-0 -mr-2 pr-2">
             <div>
               {dayEntries.map(([dateKey, dayItems], groupIdx) => {
                 const isCollapsed = collapsedDays.has(dateKey);