Feinschliff

components/download-menu.vue

@@ -36,7 +36,7 @@ defineProps<{
 			>
 				<MenuItem>
 					<button
-						class="rounded border shadow hover:bg-slate-200 active:bg-slate-300"
+						class="flex h-fit flex-col gap-1 rounded border pb-1 shadow hover:bg-slate-200 active:bg-slate-300"
 						@click="
 							downloadAsJson(
 								{ entity: data.entity.data, details: data.details.data },
@@ -46,11 +46,12 @@ defineProps<{
 					>
 						<span class="sr-only">Download as .JSON</span>
 						<FileJson class="m-2 h-6 w-6 shrink-0" />
+						<span class="mx-auto text-xs text-gray-600">.json</span>
 					</button>
 				</MenuItem>
 				<MenuItem>
 					<XlsxButton
-						class="rounded border shadow hover:bg-slate-200 active:bg-slate-300"
+						class="flex h-fit flex-col gap-1 rounded border pb-1 shadow hover:bg-slate-200 active:bg-slate-300"
 						:data="data"
 						:collection="collection"
 					/>

components/xlsx-button.vue

@@ -285,5 +285,6 @@ const downloadXlsx = () => {
 	<button @click="downloadXlsx">
 		<span class="sr-only">Download as .XLSX</span>
 		<FileSpreadsheet class="m-2 h-6 w-6 shrink-0" />
+		<span class="mx-auto text-xs text-gray-600">.xlsx</span>
 	</button>
 </template>

pages/search/relations.vue

@@ -9,7 +9,7 @@ import { definePageMeta } from "#imports";
 const collectionName = "viecpro_relations";
 const queryBy = ["target.name", "source.name", "relation_type"];
 const koi = ["source_kind", "source.name", "relation_type", "target.name", "target_kind"];
-const tableCols = "grid-cols-[2fr_3fr_3fr_2fr_3fr]";
+const tableCols = "grid-cols-[2fr_4fr_3fr_4fr_2fr]";
 
 const schema = ref(
 	useQuery({