From 597b546e11f43f59a4ba7fda71f9dd35d54477ea Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Thu, 29 Oct 2026 19:07:08 +0100
Subject: [PATCH] fix: keep the calendar period title readable at 320px wide

---
 .../__tests__/calendar-toolbar-phone.test.tsx         | 11 +++++++++++
 components/calendar/calendar-toolbar.tsx              |  8 +++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/calendar/__tests__/calendar-toolbar-phone.test.tsx b/components/calendar/__tests__/calendar-toolbar-phone.test.tsx
index dc9171553..84f236ce6 100644
--- a/components/calendar/__tests__/calendar-toolbar-phone.test.tsx
+++ b/components/calendar/__tests__/calendar-toolbar-phone.test.tsx
@@ -42,3 +42,14 @@ describe('phone toolbar in the day view', () => {
     expect(screen.getByRole('button', { name: 'nav_open_menu' })).toBeInTheDocument();
   });
 });
+
+// At 320px the month title was cut to one letter ("C…") beside the menu, the
+// chevrons, Today and the header buttons.
+describe('phone toolbar at 320px', () => {
+  it('gives the period title a line of its own below 25rem', () => {
+    renderToolbar({ viewMode: 'month' });
+    const title = screen.getByText('Oct 2026');
+    expect(title).toHaveClass('max-[25rem]:basis-full', 'max-[25rem]:order-first');
+    expect(title.parentElement).toHaveClass('flex-wrap');
+  });
+});
diff --git a/components/calendar/calendar-toolbar.tsx b/components/calendar/calendar-toolbar.tsx
index 2fbc506ab..f67c49bb3 100644
--- a/components/calendar/calendar-toolbar.tsx
+++ b/components/calendar/calendar-toolbar.tsx
@@ -232,8 +232,10 @@ export function CalendarToolbar({
                 <div className="flex-1 min-w-0">{mobileSearchField}</div>
               </div>
             ) : (
-            /* Row 1: Back / Date nav / Today */
-            <div className="flex items-center gap-1">
+            /* Row 1: Back / Date nav / Today. Below 400px (25rem, so a larger
+               text size counts too) the period title takes a line of its own
+               above the buttons: beside them it was cut to one letter. */
+            <div className="flex flex-wrap items-center gap-1">
               {/* The way back to the month takes the menu's place: both left the date no room. */}
               {onMenuClick && !onNavigateBack && (
                 <IconButton size="icon-lg" label={t("nav_open_menu")} onClick={onMenuClick} className="-ms-1 touch-manipulation">
@@ -251,7 +253,7 @@ export function CalendarToolbar({
                 </IconButton>
               )}
               <span
-                className="text-sm font-semibold text-center flex-1 select-none truncate"
+                className="text-sm font-semibold text-center flex-1 select-none truncate max-[25rem]:order-first max-[25rem]:basis-full max-[25rem]:ps-1 max-[25rem]:text-start"
                 title={viewMode === "day" ? formatFullDate(titleDate) : getDateLabel()}
               >
                 {getDateLabel()}