fix(datetime): fix overlap in datetime-button modal from datetime being too short

[droc101]

Issue number: resolves #29589

---

What is the current behavior?

The ion-datetime.datetime-grid inside a .ion-datetime-button-overlay is set to be 320px tall instead of the normal 350px. This causes the selection circles in iOS mode to overlap other dates on months that span across six weeks (such as June 2024)

What is the new behavior?

• A ion-datetime.datetime-grid inside .ion-datetime-button-overlay is now 350px tall

Does this introduce a breaking change?

• Yes
• No

[vercel]

@droc101 is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jul 21, 2026 3:12pm

[thetaPC]

Thanks, this is close. One more case to handle before it is complete.

The iOS scoped min-height fixes the overlap for a plain datetime, but the overlap comes back when the datetime has show-default-title or show-default-buttons (or both). You can reproduce it with a six-week month such as June 2024 and either of those props enabled.

<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-modal>
  <ion-datetime id="datetime" show-default-title="true" show-default-buttons="true" value="2024-06-13T16:30:00></ion-datetime>
</ion-modal>

[thetaPC]

Nice work tracking this down. Your diagnosis is correct: the overlap comes from .ion-datetime-button-overlay ion-datetime.datetime-grid overriding the datetime's height, and it undercuts the min-height: 350px that iOS declares for itself in datetime.ios.scss. It looks like a long standing bug rather than an intentional choice.

One refinement before we merge. The current rule applies to every mode, but the overlap is iOS only. In iOS mode the calendar rows are allowed to collapse, so a six-week month gets crammed into the capped height and the day highlights overlap. In MD mode each row cannot shrink below the day size, so the calendar just grows the overlay taller and never overlaps. That means bumping the shared rule to 350px also grows MD overlays that did not need it.

Suggested change

	min-height: 350px;
	}
	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;
	}