yiekheng/cm_whatsapp_bot_v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): wrap long recurrence description on reminder detail card

Browse Source 
A reminder set to fire on many days of the month renders a long
description ("Every month on days 4, 6, 11, 13, 18, 20 +2 more at
11:32"). The recurrence <p> used flex items-center which kept the
icon and the text on a single non-wrapping row — the text overflowed
horizontally and the card grew wider instead of letting the text
break.

Switch to flex items-start, wrap the text in a <span min-w-0> so it
becomes a shrinkable flex item that wraps internally, and bump the
icon down by mt-0.5 to keep it baseline-aligned with the first line
of text now that items-start no longer vertically centers it.

The list-page card already used <span> for the same text and was
unaffected.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yiekheng 2026-05-10 21:11:09 +08:00
parent 429ae0827f
commit e32f633e02
1 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web/src/app/reminders/[id]/page.tsx
View File

@ -230,12 +230,21 @@ export default async function ReminderDetailPage({ params }: Props) {
</p>
<p className="text-sm font-medium">{formatWhen(reminder.scheduledAt, tz)}</p>
{reminder.rrule && reminder.scheduledAt ? (
<p className="flex items-center gap-1.5 text-xs text-primary/80">
<RepeatIcon className="size-3 shrink-0" />
// items-start (not items-center) + wrapping the text in
// a <span min-w-0> so a long recurrence description
// ("Every month on days 4, 6, 11, 13, 18, 20 +2 more
// at 11:32") wraps onto a second line instead of
// overflowing the card horizontally. mt-0.5 nudges the
// icon to baseline with the first line of text since
// items-start no longer vertically centers it.
<p className="flex items-start gap-1.5 text-xs text-primary/80">
<RepeatIcon className="size-3 shrink-0 mt-0.5" />
<span className="min-w-0">
{describeRecurrence(
specFromRrule(reminder.rrule),
DateTime.fromJSDate(reminder.scheduledAt).setZone(reminder.timezone),
)}
</span>
</p>
) : (
<p className="text-xs text-muted-foreground">One-off</p>