Wrap lines in log messages with line feeds

Signed-off-by: Chris Jackson <[email protected]>

Author: cdjackson

bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue

@@ -125,10 +125,8 @@
                  :class="{ 'disabled-link': !stateConnected || !stateProcessing, 'no-margin-left': $device.ios }"
                  @click="loggingPause" />
         <f7-link icon-ios="f7:stop_fill" icon-aurora="f7:stop_fill" icon-md="material:stop_fill"
-                 :icon-color="!stateConnected ? 'gray' : ''"
-                 :tooltip="!$device.ios ? 'Stop receiving logs' : ''"
-                 :class="{ 'disabled-link': !stateConnected, 'no-margin-left': $device.ios }"
-                 @click="loggingStop" />
+                 :icon-color="!stateConnected ? 'gray' : ''" :tooltip="!$device.ios ? 'Stop receiving logs' : ''"
+                 :class="{ 'disabled-link': !stateConnected, 'no-margin-left': $device.ios }" @click="loggingStop" />
       </f7-nav-right>
 
       <f7-subnavbar :inner="false" style="padding-right: var(--f7-safe-area-right)">
@@ -158,8 +156,8 @@
                :class="{ 'disabled-link': filterCount == 0 }" @click="downloadCSV" />
       <f7-link icon-f7="rectangle_on_rectangle" tooltip="Copy filtered log to clipboard"
                :class="{ 'disabled-link': filterCount == 0 }" @click="copyTableToClipboard" />
-      <f7-link icon-f7="trash" tooltip="Clear the log buffer"
-               :class="{ 'disabled-link': tableData.length == 0 }" @click="clearLog" />
+      <f7-link icon-f7="trash" tooltip="Clear the log buffer" :class="{ 'disabled-link': tableData.length == 0 }"
+               @click="clearLog" />
       <f7-link @click="toggleErrorDisplay" tooltip="Always show error level logs">
         <f7-icon v-if="showErrors" f7="exclamationmark_triangle_fill" />
         <f7-icon v-else f7="exclamationmark_triangle" />
@@ -220,7 +218,7 @@
     table-layout auto
 
   td.nowrap
-    padding 5px
+    padding 0px
     text-align left
     white-space nowrap
 
@@ -233,6 +231,7 @@
 
   tr.table-rows
     height 31px
+    vertical-align top
 
   tr.error
     background-color rgb(255, 96, 96)
@@ -486,7 +485,7 @@ export default {
         milliseconds: ms,
         level: logEntry.level.toUpperCase(),
         loggerName: logEntry.loggerName,
-        message: logEntry.message
+        message: logEntry.message.replace(/\n/g, '<br>')
       }
 
       this.batchLogs.push(entry)