imp: improve UI for dynamic components

src/components/dynamic/ArrayObjectElement.vue

@@ -18,8 +18,8 @@ const header = computed(() => {
 });
 </script>
 <template>
-  <div class="overflow-auto p-4 " :class=" value.length > 5 ? 'h-[500px]': ''">
-    <table class="table table-compact table-pin-rows w-full">
+  <div class="overflow-auto max-h-96 ">
+    <table class="table table-xs table-compact table-pin-rows w-full">
       <thead v-if="thead">
         <tr>
           <th

src/components/dynamic/ObjectElement.vue

@@ -15,10 +15,7 @@ const props = defineProps(['value']);
             {{ String(k).replaceAll('_', ' ') }}
           </td>
           <td>
-            <div
-              class="overflow-hidden w-auto whitespace-normal"
-              style="max-width: 1000px"
-            >
+            <div class="overflow-hidden w-auto whitespace-normal" >
               <Component
                 v-if="v"
                 :is="select(v, 'horizontal')"

src/components/dynamic/TextElement.vue

@@ -25,7 +25,7 @@ function isAddress() {
 
 const text = computed(() => {
   if(!props.value) return ""
-  const v = props.value
+  const v = String(props.value)
   switch(true) {
     case v.length === 28 && v.endsWith("="): {
       return format.validator(v) || v