Layout is incorrect at certain viewport sizes #5110

New Issue

OVERLORD · 2026-02-05T09:41:07+03:00

OVERLORD commented

2026-02-05 09:41:07 +03:00

Originally created by @thegatesdev on GitHub (Jan 8, 2025).

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

Open the BookStack app (demo works)
Open the developer console
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:

Originally created by @thegatesdev on GitHub (Jan 8, 2025). ### 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](https://github.com/BookStackApp/BookStack/blob/33b46882f39106697a704dadd25f221f0dc2ff53/resources/sass/_mixins.scss#L2) and by extension [the `hide-under` and `hide-over` CSS classes](https://github.com/BookStackApp/BookStack/blob/33b46882f39106697a704dadd25f221f0dc2ff53/resources/sass/_layout.scss#L301) 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](https://github.com/user-attachments/assets/a92bb250-f0a2-429c-82ac-7354c0d0d8d5) **Over 1000px:** ![image](https://github.com/user-attachments/assets/50286b13-61b8-45dd-86b3-4a099500cca1) **Under 1000px:** ![image](https://github.com/user-attachments/assets/0c68dbbc-e92d-4106-b227-f08add4e4e48)

OVERLORD added the 🐛 Bug 💻 Front-End labels 2026-02-05 09:41:07 +03:00

OVERLORD closed this issue

2026-02-05 09:41:09 +03:00

OVERLORD commented

2026-02-05 09:41:11 +03:00

@ssddanbrown commented on GitHub (Feb 23, 2025):

Thanks @thegatesdev, Now addressed via 5c78f8352e, to be part of the next feature release.

@ssddanbrown commented on GitHub (Feb 23, 2025): Thanks @thegatesdev, Now addressed via 5c78f8352e82231aaef70e2b3be47360d840ca47, to be part of the next feature release.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#5110