From 32f87e1a9286881c8b8676a58aa9440b88ca7554 Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 21:12:02 +0800
Subject: [PATCH] fix(web): truncate long recurrence description with ellipsis
 on detail card

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>
---
 apps/web/src/app/reminders/[id]/page.tsx | 27 +++++++++++++++---------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/reminders/[id]/page.tsx b/apps/web/src/app/reminders/[id]/page.tsx
index f16a16e..474c15b 100644
--- a/apps/web/src/app/reminders/[id]/page.tsx
+++ b/apps/web/src/app/reminders/[id]/page.tsx
@@ -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),