[WD-11691] chore: minor UI change for vertical navigation resizing.

[Kxiru]

Done

• Minor scss changes to achieve the design stated in this figma sheet.

QA

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @mas-who or @edlerd for access.
   • With a local copy of this branch, run as described here.
2. Perform the following QA steps:
   • N/A

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[edlerd]

We shouldn't introduce a new concept for scrolling. We currently have this function to set the lower part of the nav to scroll. It works by measuring its height and comparing it to the total available height. This way we get a smooth transition on resize of the browser. It should also work by enabling scrolling on collapse/un-collapse of the accordions in the navigation (like for storage) in all possible height/width combinations.

So either remove that function and find a pure css solution or remove the css solution and rely on the existing one.

[edlerd]

See screen below:

1. We shouldn't hide the scrollbar in the navigation (see scrollbar is present on the right)
2. The top part of the nav is cut, even though there is enough space below. The height of the top part should be fully responsive, so it works in all possible screen widths/heights perfectly.

[edlerd]

On the demo server, the navigation doesn't scroll any more. I.e. when I shrink the browser windows height the lower part of the nav stays visible as required, but the middle part is cur with no way of reaching the hidden nav items. Is the demo not updated, or is it a problem with the changes?

[Kxiru]

On the demo server, the navigation doesn't scroll any more. I.e. when I shrink the browser windows height the lower part of the nav stays visible as required, but the middle part is cur with no way of reaching the hidden nav items. Is the demo not updated, or is it a problem with the changes?

That is interesting... On my local computer and when I run the demo server, I am getting the correct behaviour. @mas-who could you please confirm what you see?

@edlerd , this is the main thing that I had issue with fixing earlier, but I have corrected this and done extensive testing since then. (As well as cleared my cache lol)

[Kxiru]

That being said, I have found that the top container is not scrollable. I added a fixing line for this in my last commit.

[edlerd]

QA looks good now, the linter has some errors, see below.

[edlerd]

This looks good, nice work 👍

[piperdeck]

LGTM