From 89c7b1a84dc48a3b6e513195f558aa67517f4b8b Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 21:13:49 +0800
Subject: [PATCH] fix(web): cap right-meta column on reminders list so name
 doesn't get starved
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The recurrence summary ("Every month on days 4, 6, 7, 11, 13, 14 +6
more at 11:32") rendered without truncation in the right meta column,
which had `shrink-0` + no max-width — so the column expanded to fit
the text and the reminder name on the left was forced to truncate
aggressively or wrap.

Cap the right column at max-w-[55%] on mobile / sm:max-w-[14rem] on
desktop, add min-w-0 to each row inside, and truncate every meta
span. Long recurrences now ellipsis with a hover title tooltip; the
reminder name reclaims the breathing room it should have.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/reminders/page.tsx | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/reminders/page.tsx b/apps/web/src/app/reminders/page.tsx
index f92e27d..576d170 100644
--- a/apps/web/src/app/reminders/page.tsx
+++ b/apps/web/src/app/reminders/page.tsx
@@ -247,15 +247,30 @@ export default async function RemindersPage({ searchParams }: PageProps) {
                         </p>
                       </div>
 
-                      <div className="shrink-0 text-right space-y-1">
-                        <div className="flex items-center justify-end gap-1 text-xs text-muted-foreground">
+                      {/* Right meta column. Capped at ~14rem so a long
+                          recurrence description ("Every month on days
+                          4, 6, 7, 11, 13, 14 +6 more at 11:32") can't
+                          starve the reminder name on the left. min-w-0
+                          + truncate on each span ellipsises overflow
+                          inside the cap. Title tooltip preserves the
+                          full text on hover. */}
+                      <div className="min-w-0 max-w-[55%] sm:max-w-[14rem] text-right space-y-1">
+                        <div className="flex min-w-0 items-center justify-end gap-1 text-xs text-muted-foreground">
                           <CalendarIcon className="size-3 shrink-0" />
-                          <span>{formatWhen(reminder.scheduledAt, tz)}</span>
+                          <span className="truncate">
+                            {formatWhen(reminder.scheduledAt, tz)}
+                          </span>
                         </div>
                         {reminder.rrule && reminder.scheduledAt ? (
-                          <div className="flex items-center justify-end gap-1 text-xs text-primary/80">
+                          <div
+                            className="flex min-w-0 items-center justify-end gap-1 text-xs text-primary/80"
+                            title={describeRecurrence(
+                              specFromRrule(reminder.rrule),
+                              DateTime.fromJSDate(reminder.scheduledAt).setZone(reminder.timezone),
+                            )}
+                          >
                             <RepeatIcon className="size-3 shrink-0" />
-                            <span>
+                            <span className="truncate">
                               {describeRecurrence(
                                 specFromRrule(reminder.rrule),
                                 DateTime.fromJSDate(reminder.scheduledAt).setZone(reminder.timezone),
@@ -264,9 +279,9 @@ export default async function RemindersPage({ searchParams }: PageProps) {
                           </div>
                         ) : null}
                         {reminder.groupCount > 0 && (
-                          <div className="flex items-center justify-end gap-1 text-xs text-muted-foreground">
+                          <div className="flex min-w-0 items-center justify-end gap-1 text-xs text-muted-foreground">
                             <UsersIcon className="size-3 shrink-0" />
-                            <span>
+                            <span className="truncate">
                               {reminder.groupCount}{" "}
                               {reminder.groupCount === 1 ? "group" : "groups"}
                             </span>