fix(datetime): md highlight does not clip at start or end of month (#26366)

Resolves #24891

core/src/components/datetime/datetime.md.scss

@@ -54,12 +54,7 @@
 // Calendar / Body
 // -----------------------------------
 :host .calendar-body .calendar-month .calendar-month-grid {
-  /**
-   * 3px top padding adds enough spacing at
-   * the top of the container for the selected
-   * day box shadow to display without clipping.
-   */
-  @include padding(3px, 10px, 0px, 10px);
+  @include padding(4px, 10px);
 
   /**
    * Calendar on MD will show an empty row

core/src/components/datetime/datetime.scss

@@ -317,8 +317,6 @@ ion-picker-column-internal {
    */
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-
-  height: 100%;
 }
 
 /**

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -355,3 +355,30 @@ test.describe('datetime: clear button', () => {
     await expect(selectedDay).toHaveCount(0);
   });
 });
+
+test('datetime: md highlight should not clip at start or end of month', async ({ page, skip }, testInfo) => {
+  skip.mode('ios', 'Highlight does not render on iOS');
+  skip.rtl('Highlight does not render differently for RTL.');
+
+  testInfo.annotations.push({
+    type: 'issue',
+    description: 'https://github.com/ionic-team/ionic-framework/issues/24891',
+  });
+
+  await page.setContent(`
+    <ion-datetime value="2021-01-01"></ion-datetime>
+  `);
+
+  const datetime = page.locator('ion-datetime');
+
+  await page.waitForSelector('.datetime-ready');
+
+  expect(await datetime.screenshot()).toMatchSnapshot(
+    `date-highlight-start-of-month-${page.getSnapshotSettings()}.png`
+  );
+
+  await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-01-31'));
+  await page.waitForChanges();
+
+  expect(await datetime.screenshot()).toMatchSnapshot(`date-highlight-end-of-month-${page.getSnapshotSettings()}.png`);
+});