fix: show nested metadata & improve its styling

src/components/metadata/MetadataItem.vue

@@ -5,16 +5,15 @@
     </q-item-label>
     <MetadataLink v-if="isLink()" :url="item.key" :text="item.value"/>
     <MetadataValue v-else :value="item.value" />
-    <MetadataItem v-for="(childItem, idx) in childItems" :key="idx" :item="childItem"/>
+    <MetadataItem v-for="(childItem, idx) in childItems" :key="idx" :item="childItem" class="nested-metadata"/>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import MetadataLink from '@/components/metadata/MetadataLink.vue';
 import MetadataValue from '@/components/metadata/MetadataValue.vue';
 
-import { computed } from 'vue';
-
 const props = defineProps({
   item: Object,
 });
@@ -24,12 +23,18 @@ const childItems = computed(() => props.item?.metadata || []);
 
 function isLink() {
   const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
-  const matches = props.item?.key?.match(regex) || null;
+  const matches = (typeof props.item?.key === 'string') ? props.item?.key?.match(regex) : null;
 
   return matches !== null;
 }
+
 </script>
 
 <style scoped>
 
+.nested-metadata {
+  margin-left: 8px;
+  margin-top: 2.5px;
+}
+
 </style>

src/components/metadata/MetadataValue.vue

@@ -43,4 +43,8 @@ const props = defineProps({
   display: flex;
   padding-right: 4px;
 }
+
+.metadata-value {
+  margin-left:10px;
+}
 </style>