From dbefd82e9a30afe70dc4ad330adca3b8457a457f Mon Sep 17 00:00:00 2001
From: Michael Drury <me@michaeldrury.co.uk>
Date: Fri, 24 Jan 2025 16:57:51 +0000
Subject: [PATCH 1/3] Some improvements to UX suggested by Andrew K.

---
 .../bindings/EvaluationSidePanel.svelte       | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index c47840ea83..dbeb4152ca 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -19,7 +19,7 @@
   $: success = !error && !empty
   $: highlightedResult = highlight(expressionResult)
   $: highlightedLogs = expressionLogs.map(l => ({
-    log: highlight(l.log.join(", ")),
+    log: l.log.map(part => highlight(part)).join(", "),
     line: l.line,
     type: l.type,
   }))
@@ -95,7 +95,9 @@
     {#if empty}
       Your expression will be evaluated here
     {:else if error}
-      {formatError(expressionError)}
+      <div class="error-msg">
+        {formatError(expressionError)}
+      </div>
     {:else}
       <div class="output-lines">
         {#each highlightedLogs as logLine}
@@ -118,13 +120,15 @@
               <span>{@html logLine.log}</span>
             </div>
             {#if logLine.line}
-              <span style="color: var(--blue)">:{logLine.line}</span>
+              <span style="color: var(--blue); overflow-wrap: normal;">:{logLine.line}</span>
             {/if}
           </div>
         {/each}
         <div class="line">
-          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-          {@html highlightedResult}
+          <div>
+            <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+            {@html highlightedResult}
+          </div>
         </div>
       </div>
     {/if}
@@ -169,29 +173,33 @@
   .header.error::before {
     background: var(--error-bg);
   }
+  .error-msg {
+    padding-top: var(--spacing-m);
+  }
   .body {
     flex: 1 1 auto;
-    padding: var(--spacing-m) var(--spacing-l);
+    padding: 0 var(--spacing-l);
     font-family: var(--font-mono);
     font-size: 12px;
     overflow-y: auto;
     overflow-x: hidden;
-    white-space: pre-line;
-    word-wrap: break-word;
+    word-wrap: anywhere;
     height: 0;
   }
   .output-lines {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xs);
   }
   .line {
-    border-bottom: var(--border-light);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: end;
-    padding: var(--spacing-s);
+    padding: var(--spacing-m);
+    word-wrap: anywhere;
+  }
+  .line:not(:first-of-type) {
+    border-top: var(--border-light);
   }
   .icon-log {
     display: flex;

From 2ef2855febcbbba5de85422c75b5e7739921f5ff Mon Sep 17 00:00:00 2001
From: Michael Drury <me@michaeldrury.co.uk>
Date: Fri, 24 Jan 2025 17:23:56 +0000
Subject: [PATCH 2/3] Prettier run.

---
 .../src/components/common/bindings/EvaluationSidePanel.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index dbeb4152ca..b11c2ca9ad 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -120,7 +120,9 @@
               <span>{@html logLine.log}</span>
             </div>
             {#if logLine.line}
-              <span style="color: var(--blue); overflow-wrap: normal;">:{logLine.line}</span>
+              <span style="color: var(--blue); overflow-wrap: normal;"
+                >:{logLine.line}</span
+              >
             {/if}
           </div>
         {/each}

From ca556cf16611710413a28cce3bd2bf9e11d498f5 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 29 Jan 2025 12:56:28 +0000
Subject: [PATCH 3/3] PR comments.

---
 .../src/components/common/bindings/EvaluationSidePanel.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index b11c2ca9ad..1e951b00cb 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -180,8 +180,8 @@
   }
   .body {
     flex: 1 1 auto;
-    padding: 0 var(--spacing-l);
     font-family: var(--font-mono);
+    margin: 0 var(--spacing-m);
     font-size: 12px;
     overflow-y: auto;
     overflow-x: hidden;
@@ -197,7 +197,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: end;
-    padding: var(--spacing-m);
+    padding: var(--spacing-m) 0;
     word-wrap: anywhere;
   }
   .line:not(:first-of-type) {