BUGFIX: Joblogs preserve whitespace and highlight errors

Related: #35

Author: mhsdesign

Resources/Private/BackendFusion/Integration/Backend.Details.fusion

@@ -39,11 +39,11 @@ Flowpack.DecoupledContentStore.BackendController.details = Neos.Fusion:Component
               </Neos.Fusion:Loop>
 
               <h2 @if.isTrue={detailTaskName} class="text-3xl py-5">Log Output for {detailTaskName}</h2>
-              <pre>
-                  {String.nl2br(String.htmlSpecialChars(jobLogs.stderr))}
+              <pre @if={!String.isBlank(jobLogs.stderr)} title="stderr" class="block whitespace-pre overflow-x-scroll border border-red-800 p-2 mb-6">
+                {String.htmlSpecialChars(jobLogs.stderr)}
               </pre>
-              <pre>
-                  {String.nl2br(String.htmlSpecialChars(jobLogs.stdout))}
+              <pre title="stdout" class="block whitespace-pre overflow-x-scroll">
+                {String.htmlSpecialChars(jobLogs.stdout)}
               </pre>
             </Neos.Fusion:Fragment>
             <p @if.notData={!detailsData}>

Resources/Public/BackendCompiled/out.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../../../var/folders/1z/rq1_kd710hn00r35j5rzqs5h0000gn/T/tmp-53849-7B7Y00uLTAH0/Flowpack.DecoupledContentStore/Resources/Private/Js/1674136282935-styles.css */
+/* ../../../../../../../../../var/folders/jx/0n3dgdj52yd7lhy7jz8m_lyc0000gn/T/tmp-76784-4SF1kWZd2RxP/Flowpack.DecoupledContentStore/Resources/Private/Js/1705479026689-styles.css */
 #app *,
 #app ::before,
 #app ::after {
@@ -34,6 +34,9 @@
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
+#app .mb-6 {
+  margin-bottom: 1.5rem;
+}
 #app .mt-4 {
   margin-top: 1rem;
 }
@@ -49,6 +52,9 @@
 #app .mb-2 {
   margin-bottom: 0.5rem;
 }
+#app .block {
+  display: block;
+}
 #app .inline-block {
   display: inline-block;
 }
@@ -123,11 +129,17 @@
 #app .overflow-hidden {
   overflow: hidden;
 }
+#app .overflow-x-scroll {
+  overflow-x: scroll;
+}
 #app .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+#app .whitespace-pre {
+  white-space: pre;
+}
 #app .rounded-md {
   border-radius: 0.375rem;
 }
@@ -143,6 +155,10 @@
 #app .border-2 {
   border-width: 2px;
 }
+#app .border-red-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 27 27 / var(--tw-border-opacity));
+}
 #app .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -191,6 +207,9 @@
   --tw-bg-opacity: 1;
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
 }
+#app .p-2 {
+  padding: 0.5rem;
+}
 #app .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;