improve ui

src/components/dynamic/ArrayObjectElement.vue

@@ -22,7 +22,7 @@ const header = computed(() => {
     <VTable
       v-if="header.length > 0"
       density="compact"
-      height="300px"
+      :height="value.length > 5? '300px': ''"
       fixed-header
       hover
     >

src/components/dynamic/ObjectElement.vue

@@ -5,10 +5,10 @@ const props = defineProps(['value']);
 </script>
 <template>
   <div class="overflow-x-auto">
-    <table class="table w-full text-sm">
+    <table class="table table-compact w-full text-sm">
       <tbody>
         <tr v-for="(v, k) of value">
-          <td class="text-capitalize" style="max-width: 100px">{{ String(k).replaceAll("_", " ") }}</td>
+          <td class="text-capitalize whitespace-break-spaces w-1/5" style="min-width: 180px;">{{ String(k).replaceAll("_", " ") }}</td>
           <td>
             <div
               class="overflow-hidden w-auto whitespace-normal"