Messy interface when opening pages on mobile (Only reproducible on RTL languages) #3958

Closed
opened 2026-02-05 07:58:03 +03:00 by OVERLORD · 4 comments
Owner

Originally created by @merrime-n on GitHub (Aug 9, 2023).

Describe the Bug

I checked this bug again on my bookstack instance. When the language is among Hebrew, Arabic or Persian (and any right-to-left language, perhaps), when the user opens a page on mobile, the UI gets too messy and an unknown error pops up as well. This error cannot be reproduced on Bookstack demo since the users do not have the permission to change the interface language. Therefore, I could only figure out the problem in my instance is with RTL languages. This issue is referencing to this existing issue.

Steps to Reproduce

  1. Go to 'Edit profile'
  2. Change the language to a RTL language (such as Hebrew, Arabic or Persian)
  3. Open a page (not a shelf or book; but a page)
  4. If you are on mobile, the interface gets messy.

Expected Behaviour

I expect the interface to be working properly everywhere in the application, no matter what device I am using.

Screenshots or Additional Context

Example: a sample page opened in Arabic interface

arab

Example: a sample page opened in Hebrew interface

hebr

Browser Details

Google Chrome Version 104.0.5112.102 (Official Build) (64-bit) On Windows 10

Exact BookStack Version

v23.06.2

PHP Version

No response

Hosting Environment

Ubuntu 22.04 VPS, installed via Docker-Compose

Originally created by @merrime-n on GitHub (Aug 9, 2023). ### Describe the Bug I checked this bug again on my bookstack instance. When the language is among Hebrew, Arabic or Persian (and any right-to-left language, perhaps), when the user opens a page on mobile, the UI gets too messy and an unknown error pops up as well. This error cannot be reproduced on Bookstack demo since the users do not have the permission to change the interface language. Therefore, I could only figure out the problem in my instance is with RTL languages. This issue is referencing to [this existing issue](https://github.com/BookStackApp/BookStack/issues/4387). ### Steps to Reproduce 1. Go to 'Edit profile' 2. Change the language to a RTL language (such as Hebrew, Arabic or Persian) 3. Open a page (not a shelf or book; but a page) 4. If you are on mobile, the interface gets messy. ### Expected Behaviour I expect the interface to be working properly everywhere in the application, no matter what device I am using. ### Screenshots or Additional Context Example: a sample page opened in Arabic interface ![arab](https://github.com/BookStackApp/BookStack/assets/100111649/0bf17cf4-1316-44fd-9dd3-cf4219e588ae) Example: a sample page opened in Hebrew interface ![hebr](https://github.com/BookStackApp/BookStack/assets/100111649/768834b1-db9d-4a13-a737-80e2c19c40b4) ### Browser Details Google Chrome Version 104.0.5112.102 (Official Build) (64-bit) On Windows 10 ### Exact BookStack Version v23.06.2 ### PHP Version _No response_ ### Hosting Environment Ubuntu 22.04 VPS, installed via Docker-Compose
OVERLORD added the 🐛 Bug💻 Front-End labels 2026-02-05 07:58:03 +03:00
Author
Owner

@merrime-n commented on GitHub (Aug 13, 2023):

ssddanbrown — Yesterday at 4:45 PM
Thanks for reporting, but there's no need to repost the whole issue here.

Well the issue has not even got a single comment after 4 days. What else shall I do?

@merrime-n commented on GitHub (Aug 13, 2023): **ssddanbrown — Yesterday at 4:45 PM** _Thanks for reporting, but there's no need to repost the whole issue here._ Well the issue has not even got a single comment after 4 days. What else shall I do?
Author
Owner

@ssddanbrown commented on GitHub (Aug 13, 2023):

What else shall I do?

Nothing, please be patient. It can often be towards the latter part of a release cycle where I go through issues posted to test and asses to then consider for that release cycle.

@ssddanbrown commented on GitHub (Aug 13, 2023): > What else shall I do? Nothing, please be patient. It can often be towards the latter part of a release cycle where I go through issues posted to test and asses to then consider for that release cycle.
Author
Owner

@ssddanbrown commented on GitHub (Aug 22, 2023):

Can confirm this, appears to be caused by the button.screen-reader-only "Enter section select mode" button on page view. Have assigned to be addressed for next feature release.

@ssddanbrown commented on GitHub (Aug 22, 2023): Can confirm this, appears to be caused by the `button.screen-reader-only` "Enter section select mode" button on page view. Have assigned to be addressed for next feature release.
Author
Owner

@ssddanbrown commented on GitHub (Aug 22, 2023):

This has now been addressed in cbcec189fd, and will be part of the next feature release.

@ssddanbrown commented on GitHub (Aug 22, 2023): This has now been addressed in cbcec189fdaa70d16036ab97c79c5dd89511b292, and will be part of the next feature release.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#3958