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 className="text-sm font-medium">{formatWhen(reminder.scheduledAt, tz)}</p>
{reminder.rrule && reminder.scheduledAt ? (
// 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">
// Single-line summary with mid-string ellipsis. Long
// descriptions ("Every month on days 4, 6, 11, 13, 18,
// 20 +2 more at 11:32") truncate cleanly via `truncate`
// (overflow-hidden + text-ellipsis + whitespace-nowrap)
// so the card height stays predictable. The native
// browser tooltip on `title` lets the operator read
// the full string without leaving the page; the edit
// form is the canonical full view.
<p
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(
specFromRrule(reminder.rrule),
DateTime.fromJSDate(reminder.scheduledAt).setZone(reminder.timezone),