fix: don't show overlay message no a no-preview html page

Author: devvaannsh

src/LiveDevelopment/main.js

@@ -43,7 +43,8 @@ define(function main(require, exports, module) {
         ExtensionUtils      = require("utils/ExtensionUtils"),
         StringUtils         = require("utils/StringUtils"),
         EventDispatcher      = require("utils/EventDispatcher"),
-        WorkspaceManager    = require("view/WorkspaceManager");
+        WorkspaceManager    = require("view/WorkspaceManager"),
+        EditorManager      = require("editor/EditorManager");
 
 
     // this is responsible to make the advanced live preview features active or inactive
@@ -453,6 +454,7 @@ define(function main(require, exports, module) {
         });
         // to understand why we need this, pls read the _setOverlayWidth function
         new ResizeObserver(_setOverlayWidth).observe($("#main-plugin-panel")[0]);
+        EditorManager.on("activeEditorChange", _hideOverlay);
 
         // allow live preview to handle escape key event
         // Escape is mainly to hide boxes if they are visible

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -22,6 +22,12 @@
 
 #panel-live-preview-frame{
     background-color: white;
+    position: relative;
+}
+
+#panel-live-preview-frame[src*="no-preview.html"],
+#panel-live-preview-frame[src*="live-preview-error.html"] {
+    z-index: 200;
 }
 
 #panel-live-preview-title {
@@ -156,6 +162,7 @@
     position: absolute;
     top: 30px;
     left: 3px;
+    z-index: 100;
 }
 
 .live-preview-status-overlay.full-width {