Fixed ACP template editor clipping

[Steve F]

Affected version

2.0.2

Just noticed this happening although only thing left on that line is 'n>' no matter what I do I can't see the end of that line.

 

[Chris D]

I've implemented a change which works, but it's a bit ugly as it's overriding a style rule that's directly applied by the CodeMirror JS.

If you'd like to test it for us, that'd be appreciated.

Edit template: code_editor.less

Below:

&.CodeMirror-focused
{
   .xf-inputFocus();
}

Add:

&.CodeMirror-simplescroll
{
   .CodeMirror-sizer
   {
      // Bit hacky but solves issue with the simplescroll bars overlapping the content
      padding-right: 30px !important;
   }
}

 

[Steve F]

Strange thing is I am not able to reproduce it now. Win10 Chrome Version 64.0.3282.186 (Official Build)

Previous Chrome bug maybe?

 

[Chris D]

I'm using latest Chrome on macOS and I was able to find a single line which was overlapped by the scrollbars in the PAGE_CONTAINER template. This line (78):

class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"

My fix earlier fixed it.

If you can't repro it, that's great, but the fix might still be necessary. With that in mind, if you're able to test it to ensure I haven't actually gone and broken anything else, that'd be great

 

[Steve F]

I was able to see the issue on that line, applied the fix and all seems okay now.