From 591676d769a3d026bc588b975baad48b74ef8e78 Mon Sep 17 00:00:00 2001
From: Will-thom <shortgamestests@gmail.com>
Date: Tue, 19 May 2026 18:56:20 -0300
Subject: [PATCH] fix(material/datepicker): prevent touch UI overflow

---
 .../datepicker/datepicker-content.scss        |  9 +++++----
 src/material/datepicker/datepicker.spec.ts    | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/material/datepicker/datepicker-content.scss b/src/material/datepicker/datepicker-content.scss
index 9af13a593af4..20c165a6bcf8 100644
--- a/src/material/datepicker/datepicker-content.scss
+++ b/src/material/datepicker/datepicker-content.scss
@@ -124,10 +124,11 @@ $touch-max-height: 788px;
   }
 
   .mat-datepicker-content-container {
-    min-height: $touch-min-height;
-    max-height: $touch-max-height;
+    min-height: min(#{$touch-min-height}, 80vh);
+    max-height: min(#{$touch-max-height}, 80vh);
     min-width: $touch-min-width;
     max-width: $touch-max-width;
+    overflow: auto;
   }
 
   .mat-calendar {
@@ -150,12 +151,12 @@ $touch-max-height: 788px;
 @media all and (orientation: portrait) {
   .mat-datepicker-content-touch .mat-datepicker-content-container {
     width: $touch-portrait-width;
-    height: $touch-portrait-height;
+    height: min(#{$touch-portrait-height}, 80vh);
   }
 
   // The content needs to be a bit taller when actions have
   // been projected so that it doesn't have to scroll.
   .mat-datepicker-content-touch .mat-datepicker-content-container-with-actions {
-    height: $touch-portrait-height-with-actions;
+    height: min(#{$touch-portrait-height-with-actions}, 80vh);
   }
 }
diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts
index a2699bb300ad..ab97818ab738 100644
--- a/src/material/datepicker/datepicker.spec.ts
+++ b/src/material/datepicker/datepicker.spec.ts
@@ -1152,6 +1152,25 @@ describe('MatDatepicker', () => {
         expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
       });
 
+      it('should keep the touch calendar container scrollable within the dialog', () => {
+        testComponent.touch = true;
+        fixture.changeDetectorRef.markForCheck();
+        fixture.detectChanges();
+
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+
+        const content = document.querySelector('.mat-datepicker-content')!;
+        const container = content.querySelector('.mat-datepicker-content-container')!;
+        const contentStyle = getComputedStyle(content);
+        const containerStyle = getComputedStyle(container);
+
+        expect(content.classList).toContain('mat-datepicker-content-touch');
+        expect(contentStyle.maxHeight).not.toBe('none');
+        expect(containerStyle.maxHeight).not.toBe('none');
+        expect(containerStyle.overflowY).toBe('auto');
+      });
+
       it('should not open calendar when toggle clicked if datepicker is disabled', () => {
         testComponent.datepicker.disabled = true;
         fixture.changeDetectorRef.markForCheck();