Background goal

We are planning to implement the T303612: [EPIC] [New component] Toast: Add Toast component to Codex 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.

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 Toast 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 Toast in a real scenario
• Test the possible issues with an iOS keyboard