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

fix(web): truncate long recurrence description with ellipsis on detail card

Browse Source 
Switched the reminder detail recurrence line from wrap-on-overflow to
single-line truncate (...) so card height stays consistent. The full
text is exposed via the native title tooltip, and editing the
schedule shows the canonical full description in the wizard.

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

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

@ -230,16 +230,23 @@ export default async function ReminderDetailPage({ params }: Props) {
</p> </p>
<p className="text-sm font-medium">{formatWhen(reminder.scheduledAt, tz)}</p> <p className="text-sm font-medium">{formatWhen(reminder.scheduledAt, tz)}</p>
{reminder.rrule && reminder.scheduledAt ? ( {reminder.rrule && reminder.scheduledAt ? (
// items-start (not items-center) + wrapping the text in // Single-line summary with mid-string ellipsis. Long
// a <span min-w-0> so a long recurrence description // descriptions ("Every month on days 4, 6, 11, 13, 18,
// ("Every month on days 4, 6, 11, 13, 18, 20 +2 more // 20 +2 more at 11:32") truncate cleanly via `truncate`
// at 11:32") wraps onto a second line instead of // (overflow-hidden + text-ellipsis + whitespace-nowrap)
// overflowing the card horizontally. mt-0.5 nudges the // so the card height stays predictable. The native
// icon to baseline with the first line of text since // browser tooltip on `title` lets the operator read
// items-start no longer vertically centers it. // the full string without leaving the page; the edit
<p className="flex items-start gap-1.5 text-xs text-primary/80"> // form is the canonical full view.
<RepeatIcon className="size-3 shrink-0 mt-0.5" /> <p
<span className="min-w-0"> className="flex items-center gap-1.5 text-xs text-primary/80"
title={describeRecurrence(
specFromRrule(reminder.rrule),
DateTime.fromJSDate(reminder.scheduledAt).setZone(reminder.timezone),
)}
>
<RepeatIcon className="size-3 shrink-0" />
<span className="truncate min-w-0">
{describeRecurrence( {describeRecurrence(
specFromRrule(reminder.rrule), specFromRrule(reminder.rrule),
DateTime.fromJSDate(reminder.scheduledAt).setZone(reminder.timezone), DateTime.fromJSDate(reminder.scheduledAt).setZone(reminder.timezone),