starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-10-31 00:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: start every event title in the arabic month view at the same edge

Browse Source
This commit is contained in:
Linus Rath
2026-10-28 12:59:00 +01:00
parent f441f3e6d1
commit ddaf2e24b2
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/calendar/__tests__/calendar-rtl-text.test.tsx
+9
View File
@@ -27,6 +27,15 @@ describe('user text and times in a right-to-left layout', () => {
expect(screen.getByText('Dinner with Carlos and co.')).toHaveAttribute('dir', 'auto');
});
// The month view: short and cut titles start at the same edge, the
// title's own start, as task titles do.
it.each(['chip', 'span'] as const)('lets the title fill the pill from its own start (%s)', (variant) => {
render(<EventCard event={dinner} variant={variant} />);
const title = screen.getByText('Dinner with Carlos and co.');
expect(title.className).toMatch(/(^| )flex-1( |$)/);
expect(title.className).toMatch(/(^| )text-start( |$)/);
});
it('keeps start before end in a block', () => {
render(<EventCard event={dinner} variant="block" />);
expect(isolatedLtr(screen.getByText('09:15 – 10:15'))).toBe(true);
components/calendar/event-card.tsx
+4 -2
View File
@@ -197,7 +197,9 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
)}
style={{ ...eventFillStyle(color, { inactive: isInactive, selected: isSelected }), ...style }}
>
<span dir="auto" className={cn("truncate", isInactive && "line-through")}>{event.title || t("events.no_title")}</span>
{/* The whole width, aligned to the title's own start: a short English
title in Arabic sat at the right, a cut one filled to the left. */}
<span dir="auto" className={cn("flex-1 min-w-0 truncate text-start", isInactive && "line-through")}>{event.title || t("events.no_title")}</span>
</button>
);
}
@@ -227,7 +229,7 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
{showTimeInMonthView && !event.showWithoutTime && (
<span className="flex-shrink-0 font-normal opacity-85">{format(startDate, timeFmt)}</span>
)}
<span dir="auto" className={cn("truncate font-medium", isInactive && "line-through")}>{event.title || t("events.no_title")}</span>
<span dir="auto" className={cn("flex-1 min-w-0 truncate text-start font-medium", isInactive && "line-through")}>{event.title || t("events.no_title")}</span>
</div>
</button>
);