update

src/components/ServiceConfigurationStatusViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row flex-wrap p-5 bg-white">
-    <div v-for="group in statuses" :key="group.name" class="p-1" :style="{ minWidth: group.minWidth }">
+    <div v-for="group in statuses" :key="group.name" class="p-1 group-container" :style="{ minWidth: group.minWidth }">
       <fieldset class="border ">
         <legend class="px-3">{{ group.name }}&nbsp;</legend>
         <table class="">
@@ -11,11 +11,13 @@
                 <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>
-              <textarea v-else class="wrap-text max-height" :rows="15" :cols="80"  readonly v-model=item.value></textarea>
+              <textarea v-else class="wrap-text max-height" :rows="15" :cols="80" readonly
+                v-model=item.value></textarea>
             </td>
           </tr>
         </table>
@@ -117,4 +119,10 @@ function formatObject(value) {
   max-height: 20vh;
   overflow-y: auto;
 }
+
+.group-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 </style>