show livepreview error in compact mode

edit.html

@@ -271,7 +271,7 @@
             <input type="checkbox" id="editor.livePreview">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
-          <span id="preview-errors" class="hidden">!</span>
+          <span id="preview-errors" hidden>!</span>
         </div>
       </section>
       <section id="actions">

edit/base.js

@@ -368,6 +368,9 @@ function LivePreview() {
   let preprocess;
   let enabled = prefs.get('editor.livePreview');
 
+  const el = $('#preview-errors');
+  el.onclick = () => messageBoxProxy.alert(el.title, 'pre');
+
   prefs.subscribe('editor.livePreview', (key, value) => {
     if (!value) {
       if (port) {
@@ -410,10 +413,9 @@ function LivePreview() {
   }
 
   async function updatePreviewer(data) {
-    const errorContainer = $('#preview-errors');
     try {
       port.postMessage(preprocess ? await preprocess(data) : data);
-      errorContainer.classList.add('hidden');
+      el.hidden = true;
     } catch (err) {
       if (Array.isArray(err)) {
         err = err.join('\n');
@@ -422,10 +424,8 @@ function LivePreview() {
         const pos = editor.getEditors()[0].posFromIndex(err.index);
         err.message = `${pos.line}:${pos.ch} ${err.message || err}`;
       }
-      errorContainer.classList.remove('hidden');
-      errorContainer.onclick = () => {
-        messageBoxProxy.alert(err.message || `${err}`, 'pre');
-      };
+      el.title = err.message || `${err}`;
+      el.hidden = false;
     }
   }
 }

edit/edit.css

@@ -1030,7 +1030,8 @@ label {
     flex-direction: row;
     box-shadow: 0 0 3rem -.75rem;
   }
-  #header.sticky #basic-info,
+  #header.sticky #basic-info-name,
+  #header.sticky #basic-info-enabled > :not(#preview-errors),
   #header.sticky #mozilla-format-buttons,
   #header.sticky .buttons > button,
   #header.sticky .split-btn-pedal,
@@ -1038,6 +1039,21 @@ label {
   h2 {
     display: none;
   }
+  #preview-errors {
+    margin: -2px .75em 0 -.25em !important;
+  }
+  #header.sticky #basic-info {
+    margin: 0;
+  }
+  #header.sticky #preview-errors {
+    position: absolute;
+    top: var(--pad05);
+    right: var(--pad05);
+    margin: .25em 0 0 !important;
+  }
+  .popup-window #header.sticky #preview-errors {
+    right: calc(var(--pad05) + 24px);
+  }
   .popup-window #details-wrapper {
     margin-right: var(--popup-button-width);
   }