add string[] and space wrap

src/components/dynamic/ArrayElement.vue

@@ -3,6 +3,7 @@ import ArrayBytesElement from './ArrayBytesElement.vue';
 import ArrayObjectElement from './ArrayObjectElement.vue';
 import TextElement from './TextElement.vue';
 import ArrayCoinElement from './ArrayCoinElement.vue';
+import ArrayStringElement from './ArrayStringElement.vue'
 
 const props = defineProps({
   value: { type: Array<Object> },
@@ -14,6 +15,8 @@ function selectByElement() {
     switch (true) {
       case first instanceof Uint8Array:
         return ArrayBytesElement;
+      case typeof first === 'string':
+        return ArrayStringElement;
       case Object.keys(first).includes('denom'):
         return ArrayCoinElement;
       default:

src/components/dynamic/ArrayStringElement.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+const props = defineProps(['value']);
+</script>
+<template>
+  <span>{{ props.value }}</span>
+</template>

src/components/dynamic/TextElement.vue

@@ -69,7 +69,7 @@ const isConvertable = computed(() => {
       </span>
     </div>
   </span>  
-  <span v-else class="flex"><span>{{ text }}</span>
+  <span v-else class="flex"><span class="break-words max-w-5xl">{{ text }}</span>
     <span v-if="isConvertable" @click="toHexOutput = !toHexOutput" class="ml-2 cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
         <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />