From 470decca7b6b89ef74095ef0bb7909b93640cd78 Mon Sep 17 00:00:00 2001
From: Alexander Harding <alex@harding.dev>
Date: Thu, 14 Nov 2024 10:39:02 -0600
Subject: [PATCH] fix(toast): swipe gesture works with custom container layout
 (#29999)

Issue number: resolves #29998

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?

Applying a custom layout to `ion-toast::part(container)`, for example
`width: 50%`, will make the part of the toast outside this element's
bounds non-interactive for swiping gestures.


## What is the new behavior?

Can swipe from anywhere on the toast with custom layout applied to
::part(container)

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

| Before | After                                         |
|-------|-----------------------------------------------------|
| <video
src="https://github.com/user-attachments/assets/fc450066-5fb1-4fd9-bfbd-7f2cd55ce855"></video>
| <video
src="https://github.com/user-attachments/assets/991f6a42-f6fe-479b-9f68-7e7e35dca799"></video>
|
---
 core/src/components/toast/toast.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss
index 2b94cf94d90..2c8398a3594 100644
--- a/core/src/components/toast/toast.scss
+++ b/core/src/components/toast/toast.scss
@@ -97,6 +97,8 @@
   background: var(--background);
 
   box-shadow: var(--box-shadow);
+
+  pointer-events: auto;
 }
 
 .toast-wrapper.toast-top {
@@ -115,7 +117,6 @@
   display: flex;
 
   align-items: center;
-  pointer-events: auto;
 
   height: inherit;
   min-height: inherit;