Fix zero-space created by expanding sidebar menu

[kjporter]

Description
When the sidebar menu expands, zero-space is created that bumps the visible elements outside of the parent body and html elements that are supposed to contain them. Here is the description of the issue from @c0repwn3r: If you have time, do you think you could refactor it further to remove the code that directly sets height and min-height? The reason I ask, is that for darkmode, the current implementation of the sidebar makes darkmode impossible to implement. By overriding height and min-height, the sidebar "pushes" the element out of the way to make room for itself - this results in there being a block directly below the sidebar where you can see directly through to the background rendered behind the page by the browser. I've taken a screenshot from a custom build of Firefox where I overrode this to #000 so you can see the issue - but every modern browser uses #fff here, so in dark mode, there would be a big ugly white block that we cannot get rid of in CSS since you can't style the emptiness where there is no page, if that makes sense
It's very weird behavior and not at all what the html/css spec says should happen, but this is what every modern browser does (tested with up-to-date versions of chromium, gecko, and webkit)

Acceptance Criteria

• Sidebar menu expands while remaining contained within parent body and html elements

Accepted By:

Dev Notes

XD Notes

Working Branch

PR

Feature Toggle

QA Notes

Deployment Notes