Send dialog: sizing and layout rules to limit dialog height jumping between states

[benjthayer]

Issue:
Send dialog currently wraps to content meaning it can shift in height during the send flow - this can be disorienting for the user.

Resolution:
New guidelines have been created in order to mitigate against this effect and retain as much consistency in height throughout the send flow as possible.

Summary:
For the purpose of setting the dialog sizing rules, the send flow is split into 2 sets of screens or phases - each with subtly different rules:

1. Transaction setup screens (where user chooses address, token, amount etc)

• Dialog height is fixed at 846px
• For these states, the dialog should not reduce in height to wrap content
• The dialog should only move below 846px height if the app window is reduced in height and the dialog needs to be resized in order to retain the standard 64px margin between the dialog and app boundary.

2. Transaction summary screens (where the user reviews networks)

• Dialog height has min. height of 846px (dialog should not go below this to wrap content)
• However, the dialog height CAN increase to show any hidden content
• In doing so, it should only increase in height to the point where all content is fully shown OR the dialog has filled the window (retaining 64px padding) - whichever is first

Transitions

• All transitions where the dialog increases in height (eg between the 2 phases above or when tabbing between the Simple, Advanced and Custom views in the transaction summary phase) should be animated to avoid disorienting the user (over 0.5-1 secs)

More info and examples of the sizing rules applied in situ of the app are available via the Figma...

Figma:
https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=21233-57676&mode=design&t=2O68lxNGG9g1b1tx-4