[4.1.5] Template Editing in Firefox cuts off editing area

[bayareajenn]

Steps to reproduce the issue

1. Using Firefox
2. Login to the backend of Joomla
3. Go to Extensions -> Templates -> Templates (or however you get there with the new dashboard/menu)
4. Click on Cassiopeia and choose any override file

Expected result

To see all the code regardless of browser

Actual result

In Firefox, code is cut off forcing the user to click inside the box and press F10 to see all the code. Chrome works fine.

System information (as much as possible)

Windows 10
Firefox version 102.0.1

Additional comments

I disabled all browser extensions and the issue persisted. Worth a try.

[brianteeman]

If you change the default editor to codemirror and then edit an article do you have the same problem there?

[bayareajenn]

Good question. The default editor is set to None. Problem persists no matter which editor is selected (including None). Tried them all. The User editor is set to "use default" as well.

[ChristineWk]

had that too (month ago) and also, if using new installation.
Saw this:

solved it with this:

.CodeMirror-gutters { left: 0px !important; }
administrator/atum > user.css

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38282.}

[brianteeman]

Good question. The default editor is set to None. Problem persists no matter which editor is selected (including None). Tried them all. The User editor is set to "use default" as well.

Thats not what I asked.

If you change the default editor to codemirror and then edit an article do you have the same problem there?

[bayareajenn]

Happens with codemirror in article editing as well.

[brianteeman]

ok - that rules some possibilities out and confirms that its the gutter-width calculation causing the problem. This is something that codemirror has had problems with for many years

[bayareajenn]

That's unfortunate, but good to know. If there's something else you'd like me to test, let me know. I'll read more slowly next time. Thanks for taking a look.

[chmst]

I am on win11 and cannot repliace this effect, Maybe it is the OS?

[mariantanase]

I reported the same behavior (not solved yet), with issue #37088

[bayareajenn]

@chmst Could be the OS. I don't have any idea how to troubleshoot what that setting could possibly be. But I'll see if I can do some searching and see what I can dig up.
@mariantanase thanks for linking your closed issue. That confirms what @chmst said with it being a Windows 10 specific issue.
I'll let y'all know what I can figure out .. or if I cannot figure anything out.

[chmst]

Thank you @mariantanase and @bayareajenn - this is one of these highly frustrating issues. Every little information can help here. @ChristineWk do you remember which OS you had at this time and what happened then? If I read your post it seems that it is resolved now for you?

[mariantanase]

That confirms what @chmst said with it being a Windows 10 specific issue.

I'm not very sure for that. In my case I used the same os (Windows 10) and the same Firefox versions, but on different computers.

[ChristineWk]

WIN 10, FF.
After an update from J 4.0.6 to 4.0.7-dev I had this phenomenon for the first time. Unfortunately I didn't know about #37088, otherwise I would have answered there at the time. I don't know why this inline segment existed (see screenshot).
If I use above code, it's OK.

[mariantanase]

solved it with this:

.CodeMirror-gutters { left: 0px !important; } administrator/atum > user.css

This fix is working for me !

[rgtr]

Hi

I have windows 7 pro and windows 8 and have the same problem.

It happens when you save the file e.g. user.css
Pressing F10 to go full screen is fine.
When you press ESC you get back to a proper display [gutter free]

Richard

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38282.}

[rgtr]

Hi
I use JCE and have that set as default editor. Tried changing to CodeMirror but makes no difference
Used the code mirror fixed given above in Atum ...
However it is clear that CodeMirror is used in Atum when editing css files.
Problem sort of goes away, but line numbers then display on top of my css code ...
My guess there is a bug somewhere.
Richard

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38282.}

[Quy]

I cannot reproduce using Windows Firefox 110.0.1.

[rgtr]

Hi
Yup - that works fine now. After making the change to the css you need to quit and close Firefox.
Richard

[Quy]

@rgtr I did not have to do anything for it to work properly. Which version of Firefox are you using?

[rgtr]

Firefox 110.0.1 on Win 11 Pro
It is something to do with caching I guess.
R

[Quy]

Can you check the left property before changing the css?

[Quy]

Closing as no longer reproducible.