fix(toast): keep icon on the same line as long message in stacked layout (#30923)

Issue number: resolves #30908

---------

## What is the current behavior?
Toast with an icon and long message using a stacked layout will wrap the
message below the icon.

## What is the new behavior?
- Apply `flex: 1` to `.toast-content` regardless of layout, which makes
sure the content does not get wrapped under the icon
- Adds an e2e test for a stacked toast with a long message to
`toast/test/layout`

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

## Other information

- Dev build: `8.7.18-dev.11768592717.14a59d2f`
- Preview:
[Layout](https://ionic-framework-git-fw-7035-ionic1.vercel.app/src/components/toast/test/layout/)

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

core/src/components/toast/test/layout/index.html

@@ -29,6 +29,9 @@
       <ion-content class="ion-padding">
         <button id="baseline" onclick="openToast(baselineConfig)">Open Baseline Layout Toast</button>
         <button id="stacked" onclick="openToast(stackedConfig)">Open Stacked Layout Toast</button>
+        <button id="stacked-long-message" onclick="openToast(stackedLongMessageConfig)">
+          Open Stacked Layout Toast with Long Message
+        </button>
       </ion-content>
 
       <script>
@@ -52,6 +55,13 @@
           message: 'This is a stacked layout toast.',
           layout: 'stacked',
         };
+
+        const stackedLongMessageConfig = {
+          ...baselineConfig,
+          message:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in elit varius, maximus sem in, bibendum justo.',
+          layout: 'stacked',
+        };
       </script>
     </ion-app>
   </body>

core/src/components/toast/test/layout/toast.e2e.ts

@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('toast: stacked layout'), () => {
-    test('should render stacked buttons', async ({ page }) => {
+    test('should render stacked toast', async ({ page }) => {
       await page.goto('/src/components/toast/test/layout', config);
       const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
 
@@ -13,5 +13,21 @@ configs().forEach(({ title, screenshot, config }) => {
       const toastWrapper = page.locator('ion-toast .toast-wrapper');
       await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-stacked`));
     });
+
+    test('should render stacked toast with long message', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30908',
+      });
+
+      await page.goto('/src/components/toast/test/layout', config);
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+
+      await page.click('#stacked-long-message');
+      await ionToastDidPresent.next();
+
+      const toastWrapper = page.locator('ion-toast .toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-stacked-long-message`));
+    });
   });
 });

core/src/components/toast/toast.scss

@@ -132,7 +132,6 @@
 .toast-layout-baseline .toast-content {
   display: flex;
 
-  flex: 1;
   flex-direction: column;
   justify-content: center;
 }
@@ -142,6 +141,8 @@
 }
 
 .toast-content {
+  flex: 1;
+
   min-width: 0;
 }