Side menu in horizontal mode has menu items aligned to the top

[brenopolanski]

Expected Behavior

Current Behavior

Possible Solution

(1) For the menu items Settings and Network Status set height: 100% or use tailwindcss h-full.

(2) The alignment of the app in horizontal mode is squeezed with the right scroll. Removing the width: calc(100vw + 1rem); in https://github.com/ArkEcosystem/desktop-wallet/blob/develop/src/renderer/App.vue#L435 it works well.

Steps to Reproduce (for bugs)

1. Just resize the app to 750px

Your Environment

• Version used: ark-desktop-wallet 2.7.0
• Environment name and version: Chrome v76.0.3809.146 - Node.js v12.4.0
• Operating System and version: Ubuntu 19.10

[dated]

FYI the adjusted width is necessary so when the Blur effect is applied the background color doesn't bleed into the blurred area. So it's probably a padding that is missing somewhere.

[dated]

I misunderstood initially, the widths are just fine. The scroll bar however doesn't appear on all OS - MacOS for instances hides it by default and shows it only while scrolling.

[brenopolanski]

I misunderstood initially, the widths are just fine. The scroll bar however doesn't appear on all OS - MacOS for instances hides it by default and shows it only while scrolling.

Hey @dated can you take a test? Look for https://github.com/ArkEcosystem/desktop-wallet/blob/develop/src/renderer/App.vue#L435 and remove or comment this line and tell me what happens - attach a screenshot here, if possible.

[dated]

I had a look this morning and saw that the blur is buggy again at this moment and needs to be refactored probably, so that css selector might need some changes as well. I'll get back to it tonight and open a separate issue if suitable.

[dated]

I will submit fixes for the icons and various other issues with the app menu together with a fix for #1636.

[dated]

Regarding the scrollbar I simply adjusted the height of the component by subtracting the height of the top menu - this way there won't be a scrollbar to begin with.