Fix “Your Account” popup on mobile (#5652)

klomontes commented

2021-09-27 18:27:18 +02:00

(Migrated from github.com)

Copy link

Fixes

Issue Number: #5652

What is the current behavior?

When the user’s email exceeds a certain width (depending on the viewport) the menu gets stuck in an animated behavior sliding from right to left or simply gets rendered outside the viewport.

What is the new behavior?

The menu now has a maximum width. If the email still needs more horizontal space, it will be rendered with an ellipsis at the end. For example “thisisalongemail@gm...”. Even if the email gets truncated it should still contain enough information that the user can be confident in knowing which account they are currently signed into.

Other information

The problem lies within the Reach UI collision detection mechanism which cannot resolve these types of rendering challenges well. This issue seems to be the one we are dealing with here.

It is not clear but this might have been addressed in the newer versions of Reach UI. In any case, bumping the version of the reach UI lib requires extensive refactoring throughout the application because of the breaking changes. This issue alone does not seem to justify that step.

PR Checklist

Toggle...

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting)
Refactoring (no functional changes)
Documentation changes
Other - Please describe:

Please check all that apply to this PR using "x":

I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
I added a line describing my change to CHANGELOG.md
I have checked that this PR does not introduce a breaking change
This PR introduces breaking changes and I have provided a detailed explanation below

## Fixes Issue Number: #5652  ## What is the current behavior? When the user’s email exceeds a certain width (depending on the viewport) the menu gets stuck in an animated behavior sliding from right to left or simply gets rendered outside the viewport. ## What is the new behavior? The menu now has a maximum width. If the email still needs more horizontal space, it will be rendered with an ellipsis at the end. For example “thisisalongemail@gm...”. Even if the email gets truncated it should still contain enough information that the user can be confident in knowing which account they are currently signed into. ## Other information The problem lies within the [Reach UI](https://reach.tech/menu-button) collision detection mechanism which cannot resolve these types of rendering challenges well. [This issue](https://github.com/reach/reach-ui/issues/631) seems to be the one we are dealing with here. It is not clear but this might have been addressed in the newer versions of Reach UI. In any case, bumping the version of the reach UI lib requires extensive refactoring throughout the application because of the breaking changes. This issue alone does not seem to justify that step.  ## PR Checklist  <details><summary>Toggle...</summary> What kind of change does this PR introduce? - [x] Bugfix - [ ] Feature - [ ] Code style update (formatting) - [ ] Refactoring (no functional changes) - [ ] Documentation changes - [ ] Other - Please describe: Please check all that apply to this PR using "x": - [x] I have checked that this PR is not a duplicate of an existing PR (open, closed or merged) - [x] I added a line describing my change to CHANGELOG.md - [x] I have checked that this PR does not introduce a breaking change - [ ] This PR introduces breaking changes and I have provided a detailed explanation below </details>

Rows
Columns

Fix “Your Account” popup on mobile (#5652) #7172

Fixes

What is the current behavior?

What is the new behavior?

Other information

PR Checklist