3020: Fix unexpected scrolling behaviour in mobile desktop

[lunars97]

Short description

Currently the category pages are having additional scrollable blank height after the toolbar footer on the small screens if the side kebab-menu is activated. This might be happening because of the visibility: hidden attribute of the Portal potentially taking up unintended space due to it being a part of the DOM, therefore it could still occupy space.

Proposed changes

• use display instead of visibility
• add relative position to the parent element (body), because of the child Portal element having the absolute position
• add z-index to be placed above the category elements
• refactor window.scrollY to calculate and memoize the value and to make sure the side menu starts at the top of the screen

Testing

• Open the side-menu on the small screen and check the category and its children to see if there is additional height after the toolbar footer and try to open the side-menu as well as inside category children

Side effects

-should be none?

Resolved issues

Fixes: #3020

---

[steffenkleinle]

@lunars97 are all of these changes necessary to fix the issue? Can you elaborate which change fixes which problem?

[lunars97]

@lunars97 are all of these changes necessary to fix the issue? Can you elaborate which change fixes which problem?

yes, these changes should fix the issue

• using display instead of visibility fixes the unexpected scroll behaviour under the footer, because visibility:hidden when the side-menu is hidden visually, it stays as a part of DOM which might occupy the space after using the side-menu and lead to unexpected extra space after hiding the side-menu.
• adding relative position to the parent element (body), because of the child Portal element having the absolute position which can fix the side-menu appearing in the middle of the view
• adding z-index to be placed above the category elements makes sure that it will appear above the category view not under
• by refactoring window.scrollY to calculate and memoize the value and to make sure the side menu starts at the top of the screen also helps with the problem of side-menu appearing in the middle of the screen

[steffenkleinle]

Great fix, thank you!

[bahaaTuffaha]

Nice solution 🤩 from now on I will keep an eye on any visibility propriety that could cause issues like this ... that was unexpected.

[bahaaTuffaha]

💭 I tried to remove this top completely and it didn't affect anything at this page not sure if we can remove it...

[lunars97]

fair question,I think we do not need it here completely

[steffenkleinle]

@f1sh1918 do you still remember why we needed this in the first place? To me it also looks like it works just fine without setting anything as top.