InlineToolbar position wrong if content width is very small

[klfman]

Description

When an inline editable node is selected in the guest frame, the InlineToolbar jumps to the far left, if the selected element has a small width:

Steps to Reproduce

• Create an inline editable object (for example a small icon in the footer or a logo in a logowall) with a very small css-styled width of 30px
• select it in the neos backend -> the toolbar is moved to the far left
• Change the width of the element to some larger value, lets say 200px
• select it in the neos backend -> the toolbar is positioned correctly

Further observations

I first thought my websites styling was messing with the css of the inline UI (which had happend before when I set a style on the body element). But when inspecting the toolbar, i saw that there is an inline-style set on one of the containers: left: 0;.

I'm suspecting a bug in the javascript code that calculates this left value.

Affected Versions

Reproduced with:

• Neos: 4.3.11; UI: 4.0.5
• Neos: 5.1.15; UI: 5.1.14

[h1Modeling]

The same / similar problem occurs on very wide screens

[patricekaufmann]

// TODO: hardcoded dimensions
const TOOLBAR_WIDTH = 200;
const TOOLBAR_HEIGHT = 50;
const toolbarPosition = {
    top: top - TOOLBAR_HEIGHT
};
if (width < TOOLBAR_WIDTH) {
    toolbarPosition.left = 0;
} else {
    toolbarPosition.right = rightAsMeasuredFromRightDocumentBorder + 'px';
}

This is the part that is responsible for that behaviour inside the NodeToolbar/index.js file.

[klfman]

@patricekaufmann Cool, thanks for finding the responsible code! 👍
Imho wanted behavior: toolbarPosition.left = 0; should be exchanged by something that refers to the leftmost corner of the clicked element, not the whole guest frame

[cv-l3hners]

This problem can still be encountered in ui version 7.3.1