extension icon indicating copy to clipboard operation
extension copied to clipboard

UI differences between Windows and MacOS

Open brandonmarshall-tm opened this issue 1 year ago • 11 comments

Recently I have noticed that Leather looks different on my Windows PC, with the scaling and colors looking a bit off.

MacOS with Brave: Screenshot 2024-01-30 at 11 11 36 AM Screenshot 2024-01-30 at 11 13 34 AM

Windows with Brave: image image

Another user reported the problem with the collectibles taking up the whole width, Windows with Chrome: image

brandonmarshall-tm avatar Jan 30 '24 19:01 brandonmarshall-tm

Thanks @brandonmarshall-tm 👍 I'll take a look at this soon. It could be we need to add some windows specific styling to keep things consistent

pete-watters avatar Jan 31 '24 05:01 pete-watters

Suggest we try and hide the scrollbar on windows too

kyranjamie avatar Jan 31 '24 13:01 kyranjamie

I suspect that the scrollbar is what's causing the issue. I don't remember it being there, and I think that is making the window a little less wide and causing the issue

brandonmarshall-tm avatar Jan 31 '24 16:01 brandonmarshall-tm

Collectibles take the full width with a single column on macos for me. I have scroll bars set to always show: system settings - appearance - show scroll bars - always.

badonyx avatar Feb 01 '24 05:02 badonyx

Thanks @badonyx and @brandonmarshall-tm . UI wise, we have a huge update coming soon to rectify a lot of these issues and polish the product - #4370 . I'll be including assessing and fixing this issue as part of that

pete-watters avatar Feb 01 '24 05:02 pete-watters

The modal wide NFT/Ordinal previews seem to be showing up on Chromium based browsers since 6.26.1, I can confirm seeing it on Edge, Brave, Chrome and Brave. (I did not see it with 6.22.0 and 6.23.0, I believe it was introduced after those). Firefox looks unaffected (tested with 6.26.1). Side-by-side comparison below

image

314159265359879 avatar Feb 02 '24 12:02 314159265359879

It seems like Brave updated and now I have a similar UI on my Mac.

Screenshot 2024-02-09 at 8 28 57 AM

brandonmarshall-tm avatar Feb 09 '24 16:02 brandonmarshall-tm

Thanks for the update guys 👍 I've setup a windows VM so will be ironing out these differences soon

pete-watters avatar Feb 12 '24 05:02 pete-watters

The issue with collectibles have 1 / 2 entries per row is related to the width of the popup. Trying to fix this now.

I have improved the layout of this screen and will try and hide the scrollbar on windows/ other platforms which should give the extra width needed. We can also even slightly tweak our smallest breakpoint to account for this if that doesn't work.

Now it kicks in once we go below 370px. Standard extension size will be 390px

https://github.com/leather-wallet/extension/assets/2938440/a0ee385f-6c75-443e-8e22-07e097254201

pete-watters avatar Feb 15 '24 12:02 pete-watters

Why would you hide the scroll bar? It is important for accessibility.

badonyx avatar Feb 18 '24 03:02 badonyx

Why would you hide the scroll bar? It is important for accessibility.

Lots of other wallets do this, e.g. Rainbow, Coinbase Wallet. Without it, the UI jumps around when going between views that do/don't scroll.

kyranjamie avatar Feb 19 '24 10:02 kyranjamie

@314159265359879 is there any chance you can test the build on this branch on Windows to measure improvements here?

pete-watters avatar Mar 06 '24 06:03 pete-watters

Yes collectibles are showing in 2 columns now! leather-1 leather-2

brandonjamesmarshall avatar Mar 06 '24 16:03 brandonjamesmarshall

This looks good, I see it resolved too.

314159265359879 avatar Mar 07 '24 10:03 314159265359879

OK that's great 👍 If you notice any other weird issues let me know.

pete-watters avatar Mar 07 '24 15:03 pete-watters

This is now resolved and will be released soon

pete-watters avatar Apr 10 '24 08:04 pete-watters