Inline TinyMCE toolbar is 1 pixel too small in width, forcing itself to create another toolbar row for no reason

[MichaelJFordham]

What is the current behavior?
I have been using TinyMCE as an inline text editor in our Angular app for over a year and it has all been working perfectly. However in the last week, for reasons I'm not sure of, the inline toolbar now forces itself to two rows. It doesn't matter how much space the first row has, the second row is always created, which in turn blocks the text being input in the editor, and therefore creates a problem for our users as they can't see what they're typing.

I have been trying to find a way to resolve this all afternoon using the TinyMCE docs or CSS hacks. I found the problem appeared to be that the element which contains the TinyMCE editor in the iframe is a single pixel too small now, meaning that there is never enough room for the final toolbar button no matter how many buttons there are.

Here is an example of the problem:

Here's what it looks like when I change the width from 629px to 630px:

In our styles.scss file I have used this CSS rule which forces the width to be 630px as a temporary workaround:

.tox-tinymce-inline { width: 630px !important; }

However, it feels like there may have been a recent update to this library which may have caused the issue so I wanted to flag it.

What is the expected behavior?
The toolbar should only have one row, with no wrapping of toolbar buttons especially when there is more than sufficient horizontal space for the toolbar buttons.

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or TinyMCE-Angular?
Up until last week this worked as expected.

TinyMCE-Angular version: 6.0.1
TinyMCE version: 6.3.1
Browsers: Google Chrome, Safari
OS: Mac OS (11.7.1)

[TinyITAdmin]

Ref: INT-3175

[gabrielpfl]

I'm experiencing the same issue, any way to solve it?