Improve comment bubble

www/pad/app-pad.less

@@ -177,13 +177,19 @@ body.cp-app-pad {
         }
         div.cp-comment-bubble {
             position: relative;
-            order: 2;
             button {
                 .fa {
                     margin: 0 !important;
                 }
-                left: 10px;
                 position: absolute;
+                padding: 0 4px;
+                background: @cp_toolbar-bg;
+                margin-left: 0px;
+                margin-top: 20px;
+                line-height: unset;
+                &:hover {
+                    background: @toolbar-bg-active;
+                }
             }
         }
         #cp-app-pad-comments {
@@ -204,8 +210,7 @@ body.cp-app-pad {
         &.cke_body_width {
             div.cp-comment-bubble {
                 button {
-                    right: -10px;
+                    margin-left: 30px;
-                    left: unset;
                 }
             }
             iframe {

www/pad/comments.js

@@ -749,31 +749,19 @@ define([
     };
     var updateBubble = function(Env) {
         if (!Env.bubble) { return; }
-        var pos = Env.bubble.node.getBoundingClientRect();
+        var pos = Env.bubble.range.getClientRects()[0];
-        if (pos.y < 0 || pos.y > Env.$inner.outerHeight()) {
+        var left = pos.x + pos.width;
-            //removeCommentBubble(Env);
+        Env.bubble.button.setAttribute('style', 'top:' + pos.y + 'px; left: '+left+'px');
-        }
-        Env.bubble.button.setAttribute('style', 'top:' + pos.y + 'px');
     };
     var addCommentBubble = function(Env) {
         var ranges = Env.editor.getSelectedRanges();
         if (!ranges.length) { return; }
-        var el = ranges[0].endContainer || ranges[0].startContainer;
+
-        var node = el && el.$;
-        if (!node) { return; }
-        if (node.nodeType === Node.TEXT_NODE) {
-            node = node.parentNode;
-            if (!node) { return; }
-        }
-        var pos = node.getBoundingClientRect();
-        var y = pos.y;
-        if (y < 0 || y > Env.$inner.outerHeight()) { return; }
         var button = h('button.btn.btn-secondary', {
-            style: 'top:' + y + 'px;',
             title: Messages.comments_comment
         }, h('i.fa.fa-commenting'));
         Env.bubble = {
-            node: node,
+            range: ranges[0],
             button: button
         };
         $(button).click(function(e)  {
@@ -781,7 +769,8 @@ define([
             Env.editor.execCommand('comment');
             Env.bubble = undefined;
         });
-        Env.$contentContainer.append(h('div.cp-comment-bubble', button));
+        Env.$contentContainer.find('iframe').before(h('div.cp-comment-bubble', button));
+        updateBubble(Env);
     };
 
     var isEditable = function (document) {