Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend: fix mobile remember wallet settings layout #3082

Conversation

shonsirsha
Copy link
Collaborator

@shonsirsha shonsirsha commented Nov 28, 2024

Previously, the switch collapses if it has no enough space causing inconsistent layout between accounts. Now, that switch always stays on right edge top of the container. If there's no enough space, the name of the account and the switch label will collapse.

Before:
Sasd9
Sasd

After:
Scx7

After, on super small screen:

Sasd4 (the fingerprint is hidden when this screenshot was taken).

@shonsirsha shonsirsha marked this pull request as draft November 28, 2024 14:41
@shonsirsha shonsirsha marked this pull request as ready for review November 28, 2024 15:02
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: 8px;
Copy link
Collaborator Author

@shonsirsha shonsirsha Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

flex gap seems to be working with our current chrome version now. Tested using macOS QT from CI.

@shonsirsha
Copy link
Collaborator Author

shonsirsha commented Dec 2, 2024

EDIT: Discussed internally

I̶t̶'s̶ m̶o̶r̶e̶ l̶i̶k̶e̶ a̶ p̶r̶o̶p̶o̶s̶a̶l̶ o̶n̶ h̶o̶w̶ i̶t̶ _̶c̶a̶n̶_̶ l̶o̶o̶k̶. W̶D̶Y̶T̶?̶ c̶c̶ @̶t̶h̶i̶s̶c̶o̶n̶n̶e̶c̶t̶ @̶j̶a̶d̶z̶e̶i̶d̶a̶n̶ W̶e̶ c̶a̶n̶ m̶a̶k̶e̶ t̶h̶e̶ "W̶a̶l̶l̶e̶t̶ m̶e̶r̶k̶e̶n̶" l̶a̶b̶e̶l̶ t̶o̶ b̶e̶ o̶n̶ t̶h̶e̶ b̶o̶t̶t̶o̶m̶ o̶f̶ t̶h̶e̶ s̶w̶i̶t̶c̶h̶ t̶o̶o̶ o̶n̶ s̶u̶p̶e̶r̶ s̶m̶a̶l̶l̶ s̶c̶r̶e̶e̶n̶ (̶l̶a̶s̶t̶ s̶c̶r̶e̶e̶n̶s̶h̶o̶t̶)̶, f̶o̶r̶ e̶x̶a̶m̶p̶l̶e̶.

@shonsirsha shonsirsha force-pushed the frontend-mobile-remember-wallet-layout branch from a5e409d to 590d498 Compare December 2, 2024 08:43
@shonsirsha
Copy link
Collaborator Author

Added margin bottom of 2px to the label text (in screenshot is "Wallet merken") to achieve the same result as we had before regarding label alignment - while maintaining the flex layout.

sussz

@shonsirsha shonsirsha force-pushed the frontend-mobile-remember-wallet-layout branch from 590d498 to e7b6a85 Compare December 2, 2024 18:16
@shonsirsha
Copy link
Collaborator Author

shonsirsha commented Dec 2, 2024

PTAL 🙏 @thisconnect desktop alignment. Tried to have exactly the same with the current master, but still very slight difference exists but not significant imo.

This PR:
Screenshot 2024-12-02 at 21 49 55

Current master:
Screenshot 2024-12-02 at 21 51 40

@shonsirsha shonsirsha force-pushed the frontend-mobile-remember-wallet-layout branch from e7b6a85 to d0f1b36 Compare December 2, 2024 20:49
Copy link
Collaborator

@thisconnect thisconnect left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tested in webdev LGTM thanks

@shonsirsha shonsirsha merged commit 5afd06b into BitBoxSwiss:master Dec 3, 2024
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants