Fix connect hardware styling #8680
Conversation
| @@ -4,6 +4,12 @@ | |||
| box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); | |||
| z-index: 25; | |||
| height: unset; | |||
| overflow-y: scroll; | |||
There was a problem hiding this comment.
looking into see if there is a way to get the right behavior without doing this as we should just use the browser's default scrolling mechanism.
There was a problem hiding this comment.
Could we experiment with removing the hardcoded height from new-external-account-form?
i get the same basic behavior you're going for if I remove these changes and do this:
There was a problem hiding this comment.
We had intentionally hidden the scrollbar on Chrome. I think @rekmarks was suggesting we do the same for Firefox to make it consistent.
I too would prefer that we use the default browser scrollbar where possible. Though the case could be made to consider the popup UI as a special case. The scrollbar looks pretty bad in the popup UI on some platforms, and consumes the very limited space we have to work with.
There was a problem hiding this comment.
Ah, that's a good point though - this does seem like the wrong place for this rule 🤔
There was a problem hiding this comment.
I thought we hid the scrollbar in the popup as a matter of policy.
Ref: transaction history
There was a problem hiding this comment.
you can apply scrollbar-width: none to popup, just don't mess with overflow rules because you end up with 22 places you have to restore the default behavior to reduce jank.
My main argument is that by adding overflow-y scroll to a div you're making that div scroll independently of the browser and this can result in poor performance.
Builds ready [95869ae]
Page Load Metrics (606 ± 64 ms)
|
* origin/develop: (689 commits) Implement asset page (#8696) fix crash on signature request (#8709) Fix accounts menu styling (#8707) Delete docs/porting_to_new_environment.md (#8704) Remove unused `getToErrorObject` parameters (#8705) hide connected-status on metamask ext (#8703) Stop adding permissions middleware to trusted connections (#8701) Use `send` state for send flow token (#8695) do not display extension id in connection modal (#8699) Fix tab content disappearing during scrolling on macOS Firefox (#8702) close details when button is pressed (#8694) Refactor token selectors (#8671) Update eth_accounts permission description (#8693) Extract selected token from token input (#8692) Fix propType for Home defaultHomeActiveTabName (#8683) Fix create account form styling (#8689) Remove unused `getSelectedTokenAssetImage` selector (#8691) Remove `getTxParams` (#8676) do not show account mismatch alert on details (#8678) Fix connect hardware styling (#8680) ...
Fixes create/add new hardware account form styling, in both Chrome and Firefox.
Connect->HardwareScreenshots from Chrome, but Firefox also tested.
Before
After