Skip to content

Layout is incorrect at certain viewport sizes #5396

Closed
@thegatesdev

Description

@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:
image
Over 1000px:
image
Under 1000px:
image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions