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

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;
 }