rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Upcoming card height constraint with flex column + maxHeight

Browse Source 
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>
This commit is contained in:
Kyle 2026-03-11 22:15:53 +08:00
parent 27a5002c74
commit 99161f1b47
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/dashboard/UpcomingWidget.tsx
View File

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