Merge branch 'bug/text-overflow' of https://github.com/artemisbot/CyberChef into artemisbot-bug/text-overflow

src/web/HTMLOperation.js

@@ -50,8 +50,8 @@ HTMLOperation.prototype.toStubHtml = function(removeIcon) {
     let html = "<li class='operation'";
 
     if (this.description) {
-        html += " data-container='body' data-toggle='popover' data-placement='auto right'\
+        html += " data-container='body' data-placement='auto right'\
-            data-content=\"" + this.description + "\" data-html='true' data-trigger='hover'";
+            data-content=\"" + this.description + "\"";
     }
 
     html += ">" + this.name;

src/web/OperationsWaiter.js

@@ -155,7 +155,22 @@ OperationsWaiter.prototype.getSelectedOp = function(ops) {
  */
 OperationsWaiter.prototype.opListCreate = function(e) {
     this.manager.recipe.createSortableSeedList(e.target);
-    $("[data-toggle=popover]").popover();
+    // Allows popover to gain focus for eg. pressing buttons/scrolling
+    $(".operation").popover({trigger: "manual", html: true, animation: true})
+        .on("mouseenter", function () {
+            const _this = this;
+            $(this).popover("show");
+            $(".popover").on("mouseleave", function () {
+                $(_this).popover("hide");
+            });
+        }).on("mouseleave", function () {
+            const _this = this;
+            setTimeout(function () {
+                if (!$(".popover:hover").length) {
+                    $(_this).popover("hide");
+                }
+            }, 50);
+        });
 };
 
 

src/web/stylesheets/utils/_overrides.css

@@ -142,6 +142,10 @@ optgroup {
     border-color: var(--popover-border-colour);
 }
 
+.popover-content {
+    max-height: 90vh;
+    overflow-y: auto;
+}
 
 .popover.right>.arrow {
     border-right-color: var(--popover-border-colour);