fix(calendar): make mobile calendar title fit

src/app/calendar-app/calendar-app.component.html

@@ -93,7 +93,12 @@
 
 <ng-template #calendarTitle>
     <span class="calendarTitle">
-        {{ mwlView ? (viewDate | calendarDate:(mwlView + 'ViewTitle'):'en') : 'Overview' }}
+        <ng-container *ngIf="mobileCalendarTitle as title; else defaultCalendarTitle">
+            {{ title }}
+        </ng-container>
+        <ng-template #defaultCalendarTitle>
+            {{ mwlView ? (viewDate | calendarDate:(mwlView + 'ViewTitle'):'en') : 'Overview' }}
+        </ng-template>
     </span>
 </ng-template>
 
@@ -224,7 +229,7 @@ <h3 class="sideNavHeader">Calendar Menu</h3>
             </div>
 
             <ng-template #mobileHeader>
-                <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
+                <div class="calendarMobileHeader">
                     <ng-container *ngTemplateOutlet="previousPeriodButton">
                     </ng-container>
 

src/app/calendar-app/calendar-app.component.scss

@@ -18,6 +18,33 @@
     }
 }
 
+.calendarTitle {
+    margin: 0 12px;
+}
+
+.calendarMobileHeader {
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: center;
+    min-width: 0;
+
+    .calendarTitle {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .calendarToolbarButton {
+        flex: 0 0 auto;
+        min-width: 40px;
+        padding: 0 8px;
+    }
+}
+
 .updateInfo {
     &:hover {
         background-color: #fff;

src/app/calendar-app/calendar-app.component.spec.ts

@@ -40,6 +40,7 @@ import { MatIcon } from '@angular/material/icon';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import moment from 'moment';
 import ICAL from 'ical.js';
+import { RunboxCalendarView } from './runbox-calendar-view';
 
 describe('CalendarAppComponent', () => {
     let component: CalendarAppComponent;
@@ -228,6 +229,19 @@ END:VCALENDAR
         expect(icon.style.color).toBe('pink');
     });
 
+    it('should use a short title in mobile day view', () => {
+        component.mobileQuery.matches = true;
+        component.viewDate = new Date(2020, 4, 23);
+        component.setView(RunboxCalendarView.Day);
+
+        fixture.detectChanges();
+
+        const title = fixture.debugElement.nativeElement.querySelector('.calendarTitle');
+
+        expect(component.mobileCalendarTitle).toBe('Sat, May 23, 2020');
+        expect(title.innerText.trim()).toBe('Sat, May 23, 2020');
+    });
+
     it('should display events', () => {
         mockData['events'] = simpleEvents;
         component.calendarservice.syncCaldav(true);

src/app/calendar-app/calendar-app.component.ts

@@ -24,6 +24,7 @@ import {
     OnDestroy,
     ViewChild,
 } from '@angular/core';
+import { formatDate } from '@angular/common';
 
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -166,6 +167,19 @@ export class CalendarAppComponent implements OnDestroy {
         clearInterval(this.viewRefreshInterval);
     }
 
+    get mobileCalendarTitle(): string | null {
+        if (!this.mobileQuery.matches || this.view !== RunboxCalendarView.Day) {
+            return null;
+        }
+
+        const currentYear = new Date().getFullYear();
+        const titleFormat = this.viewDate.getFullYear() === currentYear
+            ? 'EEE, MMM d'
+            : 'EEE, MMM d, y';
+
+        return formatDate(this.viewDate, titleFormat, 'en');
+    }
+
     addEvent(on?: Date): void {
         // setup new event
         const new_event = RunboxCalendarEvent.newEmpty(this.calendarservice.me.timezone);