Merge pull request #15435 from Budibase/fix/cheeks-ux-review-console-log

JS Console log UX improvements

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}
+      <div class="error-msg">
         {formatError(expressionError)}
+      </div>
     {:else}
       <div class="output-lines">
         {#each highlightedLogs as logLine}
@@ -118,15 +120,19 @@
               <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">
+          <div>
             <!-- eslint-disable-next-line svelte/no-at-html-tags-->
             {@html highlightedResult}
           </div>
         </div>
+      </div>
     {/if}
   </div>
 </div>
@@ -169,29 +175,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);
     font-family: var(--font-mono);
+    margin: 0 var(--spacing-m);
     font-size: 12px;
     overflow-y: auto;
     overflow-x: hidden;
-    white-space: pre-line;
+    word-wrap: anywhere;
-    word-wrap: break-word;
     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) 0;
+    word-wrap: anywhere;
+  }
+  .line:not(:first-of-type) {
+    border-top: var(--border-light);
   }
   .icon-log {
     display: flex;