Align date/time column in upcoming widget

Give the date column a fixed width (7rem) and right-align it so
entries with different date formats (date-only vs datetime) line up.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-02-21 12:26:47 +08:00
parent 7c02b4f824
commit e74d4cf7c6

View File

@ -48,7 +48,7 @@ export default function UpcomingWidget({ items, days = 7 }: UpcomingWidgetProps)
> >
<Icon className={cn('h-3.5 w-3.5 shrink-0', config.color)} /> <Icon className={cn('h-3.5 w-3.5 shrink-0', config.color)} />
<span className="text-sm font-medium truncate flex-1 min-w-0">{item.title}</span> <span className="text-sm font-medium truncate flex-1 min-w-0">{item.title}</span>
<span className="text-xs text-muted-foreground shrink-0 whitespace-nowrap tabular-nums"> <span className="text-xs text-muted-foreground shrink-0 whitespace-nowrap tabular-nums w-[7rem] text-right">
{item.datetime {item.datetime
? format(new Date(item.datetime), 'MMM d, h:mm a') ? format(new Date(item.datetime), 'MMM d, h:mm a')
: format(new Date(item.date), 'MMM d')} : format(new Date(item.date), 'MMM d')}