feat: better tooltips for mods in content tab hosting panel (#5679)

* feat: better tooltips for mods in content tab hosting panel

* feat: qa

packages/ui/src/components/project/server/ServerModpackContentCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="flex gap-1.5 items-center justify-between px-3 pr-1.5 py-1.5 rounded-2xl bg-bg">
 		<div class="grid grid-cols-[auto_1fr] gap-1.5 items-center">
-			<Avatar :src="icon" size="34px" class="!rounded-xl !shadow-none" />
+			<Avatar :src="icon" size="34px" class="!rounded-xl !shadow-none" raised />
 			<div class="flex flex-col items-start overflow-hidden">
 				<div
 					v-tooltip="showCustomModpackTooltip ? formatMessage(messages.customModpackTooltip) : name"
@@ -12,6 +12,14 @@
 					{{ name }}
 				</div>
 				<div
+					v-if="filename"
+					v-tooltip="filename"
+					class="truncate text-sm text-secondary max-w-full"
+				>
+					{{ filename }}
+				</div>
+				<div
+					v-if="versionNumber"
 					v-tooltip="versionNumber"
 					class="truncate font-medium text-sm max-w-full"
 					:class="onclickVersion ? 'hover:underline cursor-pointer' : ''"
@@ -38,7 +46,8 @@ import ButtonStyled from '../../base/ButtonStyled.vue'
 
 defineProps<{
 	name: string
-	versionNumber: string
+	versionNumber?: string
+	filename?: string
 	icon?: string
 	onclickName?: () => void
 	onclickVersion?: () => void