search

leather-io / extension

Leather browser extension
https://leather.io
MIT License
297 stars 142 forks source link

UI differences between Windows and MacOS #4882

Closed brandonmarshall-tm closed 6 months ago

brandonmarshall-tm commented 8 months ago

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

pete-watters commented 8 months ago

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

kyranjamie commented 8 months ago

Suggest we try and hide the scrollbar on windows too

brandonmarshall-tm commented 8 months ago

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

badonyx commented 8 months ago

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.

pete-watters commented 8 months ago

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

314159265359879 commented 8 months ago

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

brandonmarshall-tm commented 8 months ago

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

Screenshot 2024-02-09 at 8 28 57 AM

pete-watters commented 8 months ago

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

pete-watters commented 8 months ago

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

badonyx commented 8 months ago

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

kyranjamie commented 8 months ago

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.

pete-watters commented 7 months ago

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

brandonjamesmarshall commented 7 months ago

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

314159265359879 commented 7 months ago

This looks good, I see it resolved too.

pete-watters commented 7 months ago

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

pete-watters commented 6 months ago

This is now resolved and will be released soon