From ed42f96070379aa12f7cf576ec431194638fe45e Mon Sep 17 00:00:00 2001
From: Lukas Moertl <moertllukas@gmail.com>
Date: Tue, 2 Jan 2024 11:57:52 +0100
Subject: [PATCH] show name on too long query names. related to
 https://github.com/acdh-oeaw/corpsum-ts/issues/8

---
 src/components/Search/QueryItem.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/QueryItem.vue b/src/components/Search/QueryItem.vue
index a6cb3bf..a3003c5 100644
--- a/src/components/Search/QueryItem.vue
+++ b/src/components/Search/QueryItem.vue
@@ -9,13 +9,15 @@ const storeQuery = queries.queries.find((q) => q.id === props.query.id) as unkno
 </script>
 
 <template>
-	<VCard :key="props.query.id" :style="`border: 2px solid ${props.query.color}`">
+	<VCard :key="props.query.id" :style="`border: 2px solid ${props.query.color};`">
 		<!-- <p>id: {{ props.query.id }}</p> -->
 		<VCardTitle>
+			<span class="text-xl" :style="`color: ${props.query.color}`">
+				{{ props.query.finalQuery }}
+				<VTooltip activator="parent">{{ props.query.finalQuery }}</VTooltip>
+			</span>
+
 			<div class="flex items-center justify-between">
-				<span class="text-xl" :style="`color: ${props.query.color}`">
-					{{ props.query.finalQuery }}
-				</span>
 				<div class="flex gap-2">
 					<VBtn
 						density="compact"