✨ Mobile | Make Flyout page accessible

[AntPolkanov]

Cc: @adamcogan

Pain

The Flyout page becomes messy once the user increases the font size.

Suggested Solution

1. Truncate labels which display user name and email
2. Vertically align email and the red mail icon

Tasks

• Implement suggestions 1 and 2
• Figure out why the padding between icons and labels (e.g. Log Out) goes away when font increases. Fix it.

Acceptance Criteria

• Meets Definition of Done - https://github.com/SSWConsulting/SSW.Rewards.Mobile/blob/main/_docs/Definition-of-Done.md

More Information

Screenshots

Figure 1: ❌ Truncated labels and messy UI

Figure 2: Font size settings to reproduce the issue

Thanks!

[AntPolkanov]

Check with @zacharykeeping and then with @adamcogan once it's fixed.