Update toolbar position

src/commands/view/SelectComponent.js

@@ -586,9 +586,11 @@ export default {
       const frameOffset = cv.getFrameOffset();
       const toolbarH = toolbarEl ? toolbarEl.offsetHeight : 0;
       const toolbarW = toolbarEl ? toolbarEl.offsetWidth : 0;
+      const elRight = pos.left + pos.width;
       let top = 0 - toolbarH;
-      let left = 0 + pos.width - toolbarW;
-      left = left < 0 ? 0 : left;
+      let left = pos.width - toolbarW;
+      left = pos.left < -left ? -pos.left : left;
+      left = elRight > frCvOff.width ? left - (elRight - frCvOff.width) : left;
 
       // Scroll with the window if the top edge is reached and the
       // element is bigger than the canvas
@@ -603,13 +605,6 @@ export default {
         }
       }
 
-      // Check left position of the toolbar
-      const leftR = left + toolbarW;
-
-      if (leftR > frCvOff.width) {
-        left -= leftR - frCvOff.width;
-      }
-
       toolbarStyle.top = `${top}${unit}`;
       toolbarStyle.left = `${left}${unit}`;
       toolbarStyle.opacity = '';

src/styles/scss/_gjs_canvas.scss

@@ -90,6 +90,8 @@ $guide_pad: 5px;
   }
 
   &badge {
+    white-space: nowrap;
+
     &__icon {
       vertical-align: middle;
       display: inline-block;
@@ -203,6 +205,7 @@ $guide_pad: 5px;
 .#{$app-prefix}toolbar {
   position: absolute;
   background-color: $colorBlue;
+  white-space: nowrap;
   color: white;
   z-index: 10;
   top: 0;