Entire page scrolls horizontally in Firefox with long horizontal code blocks #1440

New Issue

OVERLORD · 2026-02-05T00:54:15+03:00

OVERLORD commented

2026-02-05 00:54:15 +03:00

Originally created by @abulgatz on GitHub (Nov 3, 2019).

Describe the bug
In Firefox, long code blocks cause the entire page to scroll horizontally

Steps To Reproduce
Steps to reproduce the behavior:

Paste the following code block into a page (using markdown editor) and open in Firefox:

$action = New-ScheduledTaskAction -Execute "C:\Program Files (x86)\Intuit\QuickBooks Desktop Point of Sale 18.0\QBPOSShell.exe"
$trigger = New-ScheduledTaskTrigger -Daily -At 10:00pm
$principal = New-ScheduledTaskPrincipal -GroupId "BUILTIN\Users"
$taskname = "Launch QuickBooks POS"

Register-ScheduledTask -Action $action -Trigger $trigger -Principal $principal -TaskName $taskname

Expected behavior
Code block should scroll horizontally, but entire page should not scroll horizontally.

Your Configuration (please complete the following information):

Exact BookStack Version (Found in settings): v0.27.5

Additional context
macOS 10.4.6

Demo
Open in Firefox: https://demo.bookstackapp.com/books/lorem-ipsum-dolor/page/draft-page

Originally created by @abulgatz on GitHub (Nov 3, 2019). **Describe the bug** In Firefox, long code blocks cause the entire page to scroll horizontally **Steps To Reproduce** Steps to reproduce the behavior: 1. Paste the following code block into a page (using markdown editor) and open in Firefox: ~~~powershell $action = New-ScheduledTaskAction -Execute "C:\Program Files (x86)\Intuit\QuickBooks Desktop Point of Sale 18.0\QBPOSShell.exe" $trigger = New-ScheduledTaskTrigger -Daily -At 10:00pm $principal = New-ScheduledTaskPrincipal -GroupId "BUILTIN\Users" $taskname = "Launch QuickBooks POS" Register-ScheduledTask -Action $action -Trigger $trigger -Principal $principal -TaskName $taskname ~~~ **Expected behavior** Code block should scroll horizontally, but entire page should not scroll horizontally. **Your Configuration (please complete the following information):** - Exact BookStack Version (Found in settings): v0.27.5 **Additional context** macOS 10.4.6 **Demo** Open in Firefox: https://demo.bookstackapp.com/books/lorem-ipsum-dolor/page/draft-page

OVERLORD added the 🔍 Pending Validation label 2026-02-05 00:54:15 +03:00

OVERLORD commented

2026-02-05 00:54:18 +03:00

@ssddanbrown commented on GitHub (Nov 15, 2019):

Hi @abulgatz,
I've given this a test on FireFox on Ubuntu, Both using the WYSIWYG editor on the demo site and using the Markdown editor on a local BookStack version.

In both tests only the codeblock has had active scrolling, not the whole page.

Do you perhaps have JavaScript disabled? Just wondering if CodeMirror does not run for you, to enable code highlighting and formatting.

@ssddanbrown commented on GitHub (Nov 15, 2019): Hi @abulgatz, I've given this a test on FireFox on Ubuntu, Both using the WYSIWYG editor on the demo site and using the Markdown editor on a local BookStack version. In both tests only the codeblock has had active scrolling, not the whole page. Do you perhaps have JavaScript disabled? Just wondering if CodeMirror does not run for you, to enable code highlighting and formatting.

OVERLORD commented

2026-02-05 00:54:20 +03:00

@abulgatz commented on GitHub (Nov 16, 2019):

I am running macOS 10.14.6 with Firefox 70.0.1.

I created a brand new Firefox profile with no extensions to make sure it wasn't a Firefox setting or Firefox extension causing issues.

I am getting full syntax highlighting. Just at some widths, the code block stays too wide and causes the whole page to horizontally scroll.

If I delete the code block, the page is fine at the same width.

I have tried going through the inspector to figure out what HTML/CSS is causing the issue, but I wasn't successful.

Page without the code block at the same width:

@abulgatz commented on GitHub (Nov 16, 2019): I am running macOS 10.14.6 with Firefox 70.0.1. I created a brand new Firefox profile with no extensions to make sure it wasn't a Firefox setting or Firefox extension causing issues. I am getting full syntax highlighting. Just at some widths, the code block stays too wide and causes the whole page to horizontally scroll. <img width="1185" alt="Screen Shot 2019-11-16 at 8 58 09 AM" src="https://user-images.githubusercontent.com/1438193/68995096-8e3ca880-084f-11ea-94ac-bfec92e9aa4a.png"> <img width="1185" alt="Screen Shot 2019-11-16 at 9 01 20 AM" src="https://user-images.githubusercontent.com/1438193/68995108-b0cec180-084f-11ea-8acf-15ae2afcbfb8.png"> If I delete the code block, the page is fine at the same width. I have tried going through the inspector to figure out what HTML/CSS is causing the issue, but I wasn't successful. Page without the code block at the same width: <img width="1185" alt="Screen Shot 2019-11-16 at 9 02 48 AM" src="https://user-images.githubusercontent.com/1438193/68995154-0d31e100-0850-11ea-9621-897df444ea0b.png">

OVERLORD commented

2026-02-05 00:54:24 +03:00

@james-geiger commented on GitHub (Nov 19, 2019):

I was able to replicate this issue in Firefox v71.0b10. Good in Chrome v78.0.x.

Looks like there's something not quite working appropriately with the breakpoints, but it wouldn't make a whole lot of sense for that to be a browser issue based on my knowledge.

I'll continue to investigate.

@james-geiger commented on GitHub (Nov 19, 2019): I was able to replicate this issue in Firefox v71.0b10. Good in Chrome v78.0.x. Looks like there's something not quite working appropriately with the breakpoints, but it wouldn't make a whole lot of sense for that to be a browser issue based on my knowledge. I'll continue to investigate. <img width="1067" alt="Screen Shot 2019-11-19 at 12 34 34 AM" src="https://user-images.githubusercontent.com/15711820/69122434-64100400-0a64-11ea-896a-23f96ad8725e.png">

OVERLORD commented

2026-02-05 00:54:27 +03:00

@abulgatz commented on GitHub (Mar 7, 2021):

@james-geiger did you ever figure anything else out?

I have determined that the CodeMirror elements are causing page resizing in both Firefox and Chrome, it's just that Chrome is handling the resizing better.

See below in Chrome, deleting the CodeMirror block resized the page:

@abulgatz commented on GitHub (Mar 7, 2021): @james-geiger did you ever figure anything else out? I have determined that the `CodeMirror` elements are causing page resizing in both Firefox **and** Chrome, it's just that Chrome is handling the resizing better. See below in Chrome, deleting the `CodeMirror` block resized the page: ![bookstack-code-width](https://user-images.githubusercontent.com/1438193/110225154-27aa2680-7ea8-11eb-8b2a-4c17b98be9f5.gif)

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1440