fix(automate): handle newline in status messages (#3532)

* fix(automate): handle newline in status messages

* fix(automate): learn css

packages/frontend-2/components/automate/viewer/panel/FunctionRunRow.vue

@@ -35,20 +35,8 @@
       <!-- Status message -->
       <div class="space-y-1">
         <div class="text-xs font-medium text-foreground-2">Status</div>
-        <div
-          v-if="
-            [
-              AutomateRunStatus.Initializing,
-              AutomateRunStatus.Running,
-              AutomateRunStatus.Pending
-            ].includes(functionRun.status)
-          "
-          class="text-xs text-foreground-2 italic"
-        >
-          Function is {{ functionRun.status.toLowerCase() }}.
-        </div>
-        <div v-else class="text-xs text-foreground-2 italic">
-          {{ functionRun.statusMessage || 'No status message' }}
+        <div class="text-xs text-foreground-2 italic whitespace-pre-wrap">
+          {{ statusMessage }}
         </div>
       </div>
 
@@ -168,4 +156,16 @@ const hasValidContextView = computed(() => {
   const currentPath = route.fullPath
   return !doesRouteFitTarget(ctxView, currentPath)
 })
+
+const statusMessage = computed(() => {
+  const isFinished = ![
+    AutomateRunStatus.Initializing,
+    AutomateRunStatus.Running,
+    AutomateRunStatus.Pending
+  ].includes(props.functionRun.status)
+
+  return isFinished
+    ? props.functionRun.statusMessage ?? 'No status message'
+    : `Function is ${props.functionRun.status.toLowerCase()}.`
+})
 </script>