Fix #997 - Truncate long email on glocal menu #1003
Conversation
| @@ -20,6 +20,14 @@ glocal-menu { | |||
| right: 28px; | |||
| border-radius: 8px; | |||
| box-shadow: 0 7px 12px -3px rgba(28, 28, 29, .502); | |||
| width: auto; | |||
| max-width: $screen-sm; | |||
There was a problem hiding this comment.
Set a max width of $screen-sm, which is 480px.
| width: auto; | ||
| max-width: $screen-sm; | ||
|
|
||
| @media screen and (max-width: 520px) { |
There was a problem hiding this comment.
Magic breakpoint of 520px here, which is roughly $screen-sm + some leg room to account for left/right padding.
| max-width: $screen-sm; | ||
|
|
||
| @media screen and (max-width: 520px) { | ||
| max-width: 100%; |
There was a problem hiding this comment.
Can you use a token here?
| width: auto; | ||
| max-width: $screen-sm; | ||
|
|
||
| @media screen and (max-width: 520px) { |
There was a problem hiding this comment.
This comment applies for both this max-width and the max-width: 520px lines.
Could you adjust the max-width to be a calc() argument of $screen-sm minus the padding?
Then you could leave the breakpoint below at a standard, variable number.
| width: auto; | |
| max-width: $screen-sm; | |
| @media screen and (max-width: 520px) { | |
| width: auto; | |
| max-width: calc($screen-sm - $spacing-xl); | |
| @media screen and (max-width: $screen-sm) { |
There was a problem hiding this comment.
You may need to double check if calc() can accept Sass variables like that. I recall it messing up with standard CSS variables, maybe?
| @@ -17,16 +17,16 @@ glocal-menu { | |||
| position: absolute; | |||
| visibility: hidden; | |||
| color: #000000; | |||
| right: 28px; | |||
| right: $spacing-lg; | |||
There was a problem hiding this comment.
$spacing-lg is 24px, feel that this is close enough.
| border-radius: 8px; | ||
| box-shadow: 0 7px 12px -3px rgba(28, 28, 29, .502); | ||
| width: auto; | ||
| max-width: $screen-sm; | ||
| max-width: calc(#{$screen-sm} - #{$spacing-lg}); |
There was a problem hiding this comment.
Calculating a smaller width based on Protocol tokens so that the width of the component does not overflow.
| left: 16px; | ||
| right: 16px; | ||
| @media screen and (max-width: $screen-sm) { | ||
| max-width: calc(#{$screen-sm} - #{$spacing-md} - #{$spacing-md}); |
There was a problem hiding this comment.
This line fine-tunes the mobile view, I switched the left/right padding to a smaller $spacing-md (16px) value and accounted for this padding in the mobile max-width. Preview: https://drive.google.com/file/d/1Q-EPRZMdOfrIFSQXbC7YKEFFy_FIS4gu/view?usp=sharing
Preview/Demo:
Screen.Recording.2021-08-09.at.11.39.13.AM.mov