Change Details

== Background goal We are planning to implement the {T303612} at the bottom center to maintain consistent placement across all devices. However, there's a potential issue with the iOS keyboard covering the Toast when it's displayed. Since the Toast typically appears after user actions (e.g. Submit, Publish, or Save), we don't expect this to be too problematic. {F57640036} This task involves prototyping and testing this placement to identify any real issues before implementation. === Acceptance criteria (or Done) [] Prototype the ToastNotification in a real scenario [] Test the possible issues with an iOS keyboard

=== Background goal We are planning to implement the {T303612} at the bottom center to maintain consistent placement across all devices. However, there's a potential issue with the iOS keyboard covering the Toast when it's displayed. Since the Toast typically appears after user actions (e.g. Submit, Publish, or Save), we don't expect this to be too problematic. {F57640036} This task involves prototyping and testing this placement to identify any real issues before implementation. === Implementation details Normally, we would use CSS to place the ToastNotification at the bottom of the viewport. For example, we might absolutely position the Toast and add a rule like `bottom: @spacing-100` or `bottom: 5vh`, the latter of which would place it a distance of 5% of the vertical viewport away from the bottom. However, `vh` units (and even `dvh`, dynamic viewport height, in my experience) do not account for the iOS keyboard (and possibly the Android one, but we haven't tested that yet). There is a VisualViewport browser API that can give you the height of the actually visible part of the viewport, outside of the keyboard. However, it does not update frequently enough to be able to reliably calculate where the Toast should be at any given moment. Given we can't reliably place the Toast above the mobile keyboard, we need to consider whether real use cases run the risk of covering the Toast with the keyboard. === Acceptance criteria (or Done) [] Prototype the ToastNotification in a real scenario [] Test the possible issues with an iOS keyboard

=== Background goal We are planning to implement the {T303612} at the bottom center to maintain consistent placement across all devices. However, there's a potential issue with the iOS keyboard covering the Toast when it's displayed. Since the Toast typically appears after user actions (e.g. Submit, Publish, or Save), we don't expect this to be too problematic. {F57640036} This task involves prototyping and testing this placement to identify any real issues before implementation. === Implementation details Normally, we would use CSS to place the ToastNotification at the bottom of the viewport. For example, we might absolutely position the Toast and add a rule like `bottom: @spacing-100` or `bottom: 5vh`, the latter of which would place it a distance of 5% of the vertical viewport away from the bottom. However, `vh` units (and even `dvh`, dynamic viewport height, in my experience) do not account for the iOS keyboard (and possibly the Android one, but we haven't tested that yet). There is a VisualViewport browser API that can give you the height of the actually visible part of the viewport, outside of the keyboard. However, it does not update frequently enough to be able to reliably calculate where the Toast should be at any given moment. Given we can't reliably place the Toast above the mobile keyboard, we need to consider whether real use cases run the risk of covering the Toast with the keyboard. === Acceptance criteria (or Done) [] Prototype the ToastNotification in a real scenario [] Test the possible issues with an iOS keyboard