From e32f633e0200ccaf41614c1ebd1b531b5919ddac Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 21:11:09 +0800
Subject: [PATCH] fix(web): wrap long recurrence description on reminder detail
 card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/apps/web/src/app/reminders/[id]/page.tsx b/apps/web/src/app/reminders/[id]/page.tsx
index be9769b..f16a16e 100644
--- a/apps/web/src/app/reminders/[id]/page.tsx
+++ b/apps/web/src/app/reminders/[id]/page.tsx
@@ -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" />
-                  {describeRecurrence(
-                    specFromRrule(reminder.rrule),
-                    DateTime.fromJSDate(reminder.scheduledAt).setZone(reminder.timezone),
-                  )}
+                // 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>