From ddaf2e24b255f970772b37570178dc6fca7fc914 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 28 Oct 2026 12:59:00 +0100
Subject: [PATCH] fix: start every event title in the arabic month view at the
 same edge

---
 components/calendar/__tests__/calendar-rtl-text.test.tsx | 9 +++++++++
 components/calendar/event-card.tsx                       | 6 ++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/calendar/__tests__/calendar-rtl-text.test.tsx b/components/calendar/__tests__/calendar-rtl-text.test.tsx
index 9b728c1f6..184780e86 100644
--- a/components/calendar/__tests__/calendar-rtl-text.test.tsx
+++ b/components/calendar/__tests__/calendar-rtl-text.test.tsx
@@ -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);
diff --git a/components/calendar/event-card.tsx b/components/calendar/event-card.tsx
index 9bc5c4073..d5dacd07a 100644
--- a/components/calendar/event-card.tsx
+++ b/components/calendar/event-card.tsx
@@ -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>
     );