From 331d518768e35dc878c4a81ed5a2b56555b33ce1 Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Fri, 17 Jul 2026 11:30:30 -0500
Subject: [PATCH 1/3] fix(datetime): fix datetime in datetime-button modal
 being too short

changes min-height of ion-datetime in ion-datetime-button-overlay to 350px from 320px to prevent overlap in months spanning across six weeks in ios mode

closes #29589
---
 core/src/css/core.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index c7f7357ab46..565ddda6b1c 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -405,7 +405,7 @@ ion-input input::-webkit-date-and-time-value {
  */
 .ion-datetime-button-overlay ion-datetime.datetime-grid {
   width: 320px;
-  min-height: 320px;
+  min-height: 350px;
 }
 
 /**

From 82d894b9c47ab075cdb375d09cd825bd5a571988 Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Wed, 22 Jul 2026 11:07:08 -0500
Subject: [PATCH 2/3] fix(datetime): only apply min-height of 350px in ios mode

---
 core/src/css/core.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 565ddda6b1c..941cf898b3e 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -405,6 +405,16 @@ ion-input input::-webkit-date-and-time-value {
  */
 .ion-datetime-button-overlay ion-datetime.datetime-grid {
   width: 320px;
+  min-height: 320px;
+}
+
+/**
+ * In iOS mode the calendar rows are allowed to collapse, so a month
+ * spanning six week-rows overlaps the selection highlights when the
+ * overlay caps the height at 320px. Restore the iOS grid min-height
+ * (refer to datetime.ios.scss) so six-week months have room.
+ */
+html.ios .ion-datetime-button-overlay ion-datetime.datetime-grid {
   min-height: 350px;
 }
 

From 5024d0c48a0064a8d0ddad0353b80d795c05abb5 Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Thu, 23 Jul 2026 11:42:59 -0500
Subject: [PATCH 3/3] fix(datetime): set min-height on iOS calendar-body to
 prevent selection highlight overlap

---
 core/src/components/datetime/datetime.ios.scss | 11 +++++++++++
 core/src/css/core.scss                         | 10 ----------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index 0e49d72018a..6107224452f 100644
--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -199,6 +199,17 @@
 
 // Calendar / Body
 // -----------------------------------
+
+/**
+ * In iOS mode the calendar rows are allowed to collapse, so a month
+ * spanning six week-rows can overlap the selection highlights with
+ * the default 350px height. This ensures the month view always has
+ * enough space to not cause overlap.
+ */
+:host .calendar-body {
+  min-height: 282px;
+}
+
 :host .calendar-body .calendar-month .calendar-month-grid {
 
   /**
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 941cf898b3e..c7f7357ab46 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -408,16 +408,6 @@ ion-input input::-webkit-date-and-time-value {
   min-height: 320px;
 }
 
-/**
- * In iOS mode the calendar rows are allowed to collapse, so a month
- * spanning six week-rows overlaps the selection highlights when the
- * overlay caps the height at 320px. Restore the iOS grid min-height
- * (refer to datetime.ios.scss) so six-week months have room.
- */
-html.ios .ion-datetime-button-overlay ion-datetime.datetime-grid {
-  min-height: 350px;
-}
-
 /**
  * When moving focus on page transitions we call .focus() on an element which can
  * add an undesired outline ring. This CSS removes the outline ring.