BUGFIX: correctly position toolbar on narrow elements

theDex · Apr 8, 2018 · 6ed29b0 · 6ed29b0
1 parent 1f5b705
commit 6ed29b0
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/packages/neos-ui-guest-frame/src/InlineUI/NodeToolbar/index.js b/packages/neos-ui-guest-frame/src/InlineUI/NodeToolbar/index.js
@@ -118,14 +118,28 @@ export default class NodeToolbar extends PureComponent {
         const nodeElement = findNodeInGuestFrame(contextPath, fusionPath);
         const {top, right} = getAbsolutePositionOfElementInGuestFrame(nodeElement);
 
+        // TODO: hardcoded dimensions
+        const TOOLBAR_WIDTH = 200;
+        const TOOLBAR_HEIGHT = 50;
+
+        const rect = nodeElement.getBoundingClientRect();
+        const toolbarPosition = {
+            top: top - TOOLBAR_HEIGHT
+        };
+        if (rect.right < TOOLBAR_WIDTH) {
+            toolbarPosition.left = 0;
+        } else {
+            toolbarPosition.right = right;
+        }
+
         const {isSticky} = this.state;
         const classNames = mergeClassNames({
             [style.toolBar]: true,
             [style['toolBar--isSticky']]: isSticky
         });
 
         return (
-            <div className={classNames} style={{top: top - 50, right}}>
+            <div className={classNames} style={toolbarPosition}>
                 <div className={style.toolBar__btnGroup}>
                     <AddNode {...props}/>
                     <HideSelectedNode {...props}/>