fix(datetime-button): buttons wrap instead of truncate (#27872)

core/src/components/datetime-button/datetime-button.scss

@@ -6,11 +6,11 @@
 :host {
   display: flex;
 
+  flex-wrap: wrap;
+
   align-items: center;
 
   justify-content: center;
-
-  min-width: 0;
 }
 
 :host button {
@@ -31,10 +31,6 @@
   font-family: inherit;
   font-size: 1rem;
 
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-
   cursor: pointer;
 
   overflow: hidden;

core/src/components/datetime-button/test/a11y/datetime-button.e2e.ts

@@ -25,7 +25,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
       await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale`));
     });
 
-    test('should truncate text on larger font sizes', async ({ page }) => {
+    test('should wrap text on larger font sizes', async ({ page }) => {
       await page.setContent(
         `
         <style>
@@ -41,29 +41,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
 
       const datetimeButton = page.locator('ion-datetime-button');
 
-      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale-truncate`));
-    });
-
-    test('should truncate text on larger font sizes inside of an item', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 48px;
-          }
-        </style>
-        <ion-item>
-          <ion-label>Start Date</ion-label>
-          <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-        </ion-item>
-        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
-      `,
-        config
-      );
-
-      const datetimeButton = page.locator('ion-datetime-button');
-
-      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale-truncate-item`));
+      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale-wrap`));
     });
   });
 });