update

src/components/ServiceConfigurationStatusViewer.vue

@@ -3,7 +3,7 @@
     <div v-for="group in statuses" :key="group.name" class="p-1" :style="{ minWidth: group.minWidth }">
       <fieldset class="border ">
         <legend class="px-3">{{ group.name }}&nbsp;</legend>
-      <table class="w-full">
+        <table class="">
           <tr v-for="item in group.items" :key="item.key">
             <td class="py-1 px-2">{{ item.name }} </td>
             <td class="py-1 px-2">
@@ -11,9 +11,11 @@
                 <BulbOutlined class="align-text-bottom" :class="{ 'text-green-400': item.value }" />
               </template>
               <template v-else-if="isObject(item.value)">
-              <vue-json-pretty :data="item.value" :deep="1" :show-double-quotes="false" :show-key-value-space="false" :show-icon="true" :item-height="18" :style="{ maxHeight: '20vh', overflowY: 'auto' }"></vue-json-pretty>
+                <vue-json-pretty :data="item.value" :deep="1" :show-double-quotes="false" :show-key-value-space="false"
+                  :show-icon="true" :item-height="18"
+                  :style="{ maxHeight: '20vh', overflowY: 'auto' }"></vue-json-pretty>
               </template>
-            <span v-else>{{ item.value }}</span>
+              <textarea v-else class="wrap-text max-height" :rows="15" :cols="80"  readonly v-model=item.value></textarea>
             </td>
           </tr>
         </table>
@@ -95,8 +97,24 @@ function isObject(value) {
   return value && typeof value === 'object';
 }
 
+// is string
+function isString(value) {
+  return 'string' === typeof (value);
+}
+
 // format object
 function formatObject(value) {
   return JSON.stringify(value, null, 2);
 }
 </script>
+<style scoped>
+.wrap-text {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.max-height {
+  max-height: 20vh;
+  overflow-y: auto;
+}
+</style>