From acd4396651622d619a4cab85701e1415a587c717 Mon Sep 17 00:00:00 2001
From: Anthony Donlon <idonlon@hotmail.com>
Date: Thu, 20 Nov 2025 08:36:01 +0800
Subject: [PATCH] editor: update editor UI

---
 editor/resources/index.html | 79 ++++++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/editor/resources/index.html b/editor/resources/index.html
index 759c864..8e7faf1 100644
--- a/editor/resources/index.html
+++ b/editor/resources/index.html
@@ -131,7 +131,7 @@
           "host_status": {
             "status": "ok",
             "location": "example.com",
-            "status_text": "Just Working"
+            "status_text": "Almost Working"
           },
           "error_source": "host",
           "what_happened": "This site is still working. And it looks great.",
@@ -383,13 +383,16 @@
     })()
   </script>
   <style>
+    body {
+      zoom: 90%;
+    }
     /* Layout: editor + preview */
     .app {
       display: flex;
       flex-direction: column;
       gap: 1rem;
       height: 100vh;
-      padding: 0.8rem;
+      /* padding: 0.8rem; */
     }
 
     /* On md and up, arrange horizontally: editor left, preview right */
@@ -425,7 +428,7 @@
       background: #fff;
       border: 1px solid #e3e6ea;
       border-radius: .5rem;
-      padding: 0.8rem;
+      padding: 0.8rem 0;
       min-height: 100%;
     }
 
@@ -513,6 +516,8 @@
           </select>
         </div>
 
+        <hr>
+
         <form id="editorForm" class="needs-validation" novalidate>
           <!-- Basic properties -->
           <div class="mb-3">
@@ -541,35 +546,7 @@
             </div>
           </div>
 
-          <!-- More information -->
-          <div class="mt-3 mb-3">
-            <h6 class="mb-2">Visit ... for more information</h6>
-
-            <div class="status-block">
-              <div class="form-row">
-                <label>Hidden</label>
-                <div class="control d-flex align-items-center gap-2">
-                  <input id="more_hidden" class="form-check-input" type="checkbox" />
-                  <!-- <small class="text-muted">If checked, the "visit ..." line is hidden</small> -->
-                </div>
-              </div>
-
-              <div class="form-row">
-                <label for="more_text">Text</label>
-                <div class="control">
-                  <input id="more_text" class="form-control form-control-sm" placeholder="cloudflare.com" />
-                </div>
-              </div>
-
-              <div class="form-row">
-                <label for="more_link">Link</label>
-                <div class="control">
-                  <input id="more_link" class="form-control form-control-sm"
-                    placeholder="https://www.cloudflare.com/" />
-                </div>
-              </div>
-            </div>
-          </div>
+          <hr>
 
           <!-- Status blocks -->
           <div class="mb-3">
@@ -610,7 +587,7 @@
               </div>
 
               <div class="form-row">
-                <label for="browser_status_text">Status text</label>
+                <label for="browser_status_text">Status Text</label>
                 <div class="control">
                   <input id="browser_status_text" class="form-control form-control-sm" />
                 </div>
@@ -653,7 +630,7 @@
               </div>
 
               <div class="form-row">
-                <label for="cloudflare_status_text">Status text</label>
+                <label for="cloudflare_status_text">Status Text</label>
                 <div class="control">
                   <input id="cloudflare_status_text" class="form-control form-control-sm" />
                 </div>
@@ -695,7 +672,7 @@
               </div>
 
               <div class="form-row">
-                <label for="host_status_text">Status text</label>
+                <label for="host_status_text">Status Text</label>
                 <div class="control">
                   <input id="host_status_text" class="form-control form-control-sm" />
                 </div>
@@ -703,6 +680,35 @@
             </div>
           </div>
 
+          <div class="mt-3 mb-3">
+            <h6 class="mb-2">Visit ... for more information</h6>
+
+            <div class="status-block">
+              <div class="form-row">
+                <label>Hidden</label>
+                <div class="control d-flex align-items-center gap-2">
+                  <input id="more_hidden" class="form-check-input" type="checkbox" />
+                  <!-- <small class="text-muted">If checked, the "visit ..." line is hidden</small> -->
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="more_text">Text</label>
+                <div class="control">
+                  <input id="more_text" class="form-control form-control-sm" placeholder="cloudflare.com" />
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="more_link">Link</label>
+                <div class="control">
+                  <input id="more_link" class="form-control form-control-sm"
+                    placeholder="https://www.cloudflare.com/" />
+                </div>
+              </div>
+            </div>
+          </div>
+
           <label for="what_happened" class="fw-semibold">What happened?</label>
           <div class="control">
             <textarea id="what_happened" class="form-control compact" placeholder="There is an internal server error on Cloudflare's network.
@@ -764,9 +770,8 @@
 
       <!-- Preview column -->
       <div class="preview">
-        <div class="d-flex justify-content-between align-items-center mb-1">
+        <div class="d-flex justify-content-between align-items-center mb-1" style="padding: 0 0.8em;">
           <h6><strong>Preview</strong></h6>
-          <div class="text-muted small">Preview updates automatically on change</div>
         </div>
 
         <iframe id="previewFrame" class="preview-frame" sandbox="allow-same-origin allow-popups allow-forms"></iframe>