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: keep the calendar period title readable at 320px wide

Browse Source
This commit is contained in:
Linus Rath
2026-10-29 19:38:45 +01:00
parent 35be105a73
commit 597b546e11
2 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/calendar/__tests__/calendar-toolbar-phone.test.tsx
+11
View File
@@ -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');
});
});
components/calendar/calendar-toolbar.tsx
+5 -3
View File
@@ -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()}