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>