Layout is incorrect at certain viewport sizes

[thegatesdev]

Describe the Bug

The BookStack interface changes based on screen size.
It mainly does this by using the larger-than and smaller-than media queries and by extension the hide-under and hide-over CSS classes
The ranges of those media queries are both exclusive. That means that when specifying hide-under-l on one element, and hide-over-l on another element, their behavior at a width of 1000px is not defined.
This applies to all screen sizes, and is especially noticeable when one element disappears and another appears in it's place at a certain width.

Steps to Reproduce

1. Open the BookStack app (demo works)
2. Open the developer console
3. Resize the developer console to make the website viewport exactly 1000px

Expected Behaviour

Interface should be correct at all screen sizes.

Browser Details

Firefox and Chromium on Windows 11

Exact BookStack Version

Development version and live demo version

Screenshots or Additional Context

1000px:

Over 1000px:

Under 1000px: