yiekheng/cm_whatsapp_bot_v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): cap right-meta column on reminders list so name doesn't get starved

Browse Source 
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>
This commit is contained in:
yiekheng 2026-05-10 21:13:49 +08:00
parent 32f87e1a92
commit 89c7b1a84d
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/web/src/app/reminders/page.tsx
View File

@ -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>