Fix wrapping in log output, fix #139

CHANGELOG.md

@@ -25,6 +25,7 @@ As this project is a user-facing application, the places in the semantic version
 ### Fixed
 
 - Status panel is empty for new corpus, until page is reloaded [#151](https://github.com/spraakbanken/mink-frontend/issues/151)
+- Word wrapping in log output in status panel [#139](https://github.com/spraakbanken/mink-frontend/issues/139)
 - Upgraded dependencies
 
 ## [1.2.0] (2024-01-17)

src/components/TerminalOutput.vue

@@ -1,3 +1,5 @@
 <template>
-  <pre class="bg-stone-600 text-lime-50 text-xs p-2 rounded"><slot /></pre>
+  <pre
+    class="bg-stone-600 text-lime-50 text-xs p-2 rounded whitespace-pre-wrap [overflow-wrap:anywhere]"
+  ><slot /></pre>
 </template>

src/corpus/job/JobStatus.vue

@@ -75,10 +75,9 @@ async function doRunJob() {
         </tr>
         <tr v-if="jobStatus.errors">
           <td colspan="2">
-            <TerminalOutput
-              class="whitespace-pre-wrap mb-2 h-fit max-h-20 resize-y"
-              >{{ jobStatus.errors }}</TerminalOutput
-            >
+            <TerminalOutput class="mb-2 h-fit max-h-20 resize-y">
+              {{ jobStatus.errors }}
+            </TerminalOutput>
           </td>
         </tr>
 
@@ -87,10 +86,9 @@ async function doRunJob() {
         </tr>
         <tr v-if="jobStatus.warnings">
           <td colspan="2">
-            <TerminalOutput
-              class="whitespace-pre-wrap mb-2 h-fit max-h-20 resize-y"
-              >{{ jobStatus.warnings }}</TerminalOutput
-            >
+            <TerminalOutput class="mb-2 h-fit max-h-20 resize-y">
+              {{ jobStatus.warnings }}
+            </TerminalOutput>
           </td>
         </tr>
 
@@ -99,10 +97,9 @@ async function doRunJob() {
         </tr>
         <tr v-if="isFailed && jobStatus.sparv_output">
           <td colspan="2">
-            <TerminalOutput
-              class="whitespace-pre-wrap mb-2 h-fit max-h-20 resize-y"
-              >{{ jobStatus.sparv_output }}</TerminalOutput
-            >
+            <TerminalOutput class="mb-2 h-fit max-h-20 resize-y">
+              {{ jobStatus.sparv_output }}
+            </TerminalOutput>
           </td>
         </tr>