updated

Author: Mte90

public/assets/js/popupcode.js

@@ -22,6 +22,9 @@ jQuery(document).ready(function () {
 		  useMaxWidth: false
 		}}, ".mermaid-" + i);
 	});
+
+	jQuery("#wpbody,#wpfooter").hide();
+	document.querySelector('.hookr-flowchart').scrollIntoView({block: 'start', behavior: 'smooth'});
 	//Go to top
 	document.querySelector('button.gotop').addEventListener('click', function () {
 	  document.body.scrollTop = document.documentElement.scrollTop = 0;
@@ -32,7 +35,6 @@ jQuery(document).ready(function () {
 		if (e.checked) {
 		  document.querySelector(".mermaid-" + e.dataset.id).style.display = 'none';
 		  document.querySelector("#" + e.dataset.hook).style.display = 'none';
-		  document.querySelector(".mermaid-download[data-id='" + e.dataset.id + "']").style.display = 'none';
 		  document.querySelector("hr[data-id='" + e.dataset.id + "']").style.display = 'none';
 		} else {
 		  document.querySelector(".mermaid-" + e.dataset.id).style.display = 'block';
@@ -41,6 +43,5 @@ jQuery(document).ready(function () {
 		}
 	  });
 	});
-	jQuery("#wpbody,#wpfooter").hide();
   });
 });

public/class-hook-flowchart.php

@@ -263,7 +263,7 @@ function print_hookr_flowchart() {
 				}
 			}
 
-			echo '<style>.hookr-flowchart {z-index: 9999;position: absolute;}.wp-admin .hookr-flowchart{margin-left: 160px;top:30px;}</style>'
+			echo '<style>.hookr-flowchart {z-index: 9999;position: absolute;background: white;}.wp-admin .hookr-flowchart{background: #f1f1f1;margin-left: 160px;top:30px;}</style>'
 			. '<div class="hookr-flowchart" style="padding-left:20px;display:none;z-index:9999;">'
 			. '<h1>Hook Flowchart</h1><h3>' . "\n"
 			. __( 'Use ctrl + f to use your browser search function or click on that buttons to jump to the parent hook, check the hook to hide', $this->get_plugin_slug() ) . '</h3><span class="buttons"></span>' . "\n"