From 97dc09b56b8200f65248ff3930ca9bb9c9137bde Mon Sep 17 00:00:00 2001
From: kei <keletrh@gmail.com>
Date: Thu, 11 Jun 2026 04:58:59 +0200
Subject: [PATCH] fix(calendar): keep calendar header visible

---
 .../calendar-app/calendar-app.component.html   |  2 +-
 .../calendar-app/calendar-app.component.scss   | 18 ++++++++++++++++++
 .../calendar-app.component.spec.ts             |  7 +++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/app/calendar-app/calendar-app.component.html b/src/app/calendar-app/calendar-app.component.html
index d539940ae..c59f415b7 100644
--- a/src/app/calendar-app/calendar-app.component.html
+++ b/src/app/calendar-app/calendar-app.component.html
@@ -198,7 +198,7 @@ <h3 class="sideNavHeader">Calendar Menu</h3>
     </mat-sidenav>
 
     <mat-sidenav-content>
-        <mat-toolbar>
+        <mat-toolbar class="calendarToolbar">
             <button mat-icon-button (click)="sidemenu.toggle()">
                 <mat-icon svgIcon="menu"></mat-icon>
             </button>
diff --git a/src/app/calendar-app/calendar-app.component.scss b/src/app/calendar-app/calendar-app.component.scss
index c56f1a8d7..f381c935d 100644
--- a/src/app/calendar-app/calendar-app.component.scss
+++ b/src/app/calendar-app/calendar-app.component.scss
@@ -31,3 +31,21 @@
         padding: 16px;
     }
 }
+
+@media(min-width: 1025px) {
+    .calendarToolbar {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+
+    :host ::ng-deep {
+        .cal-month-view .cal-header,
+        .cal-week-view .cal-day-headers {
+            background-color: #fff;
+            position: sticky;
+            top: 64px;
+            z-index: 9;
+        }
+    }
+}
diff --git a/src/app/calendar-app/calendar-app.component.spec.ts b/src/app/calendar-app/calendar-app.component.spec.ts
index e2b29af55..0363452f6 100644
--- a/src/app/calendar-app/calendar-app.component.spec.ts
+++ b/src/app/calendar-app/calendar-app.component.spec.ts
@@ -228,6 +228,13 @@ END:VCALENDAR
         expect(icon.style.color).toBe('pink');
     });
 
+    it('should mark the calendar toolbar for sticky positioning', () => {
+        fixture.detectChanges();
+
+        const toolbar = fixture.debugElement.nativeElement.querySelector('mat-toolbar.calendarToolbar');
+        expect(toolbar).toBeTruthy();
+    });
+
     it('should display events', () => {
         mockData['events'] = simpleEvents;
         component.calendarservice.syncCaldav(true);