From 074ae3cb0b8848669b39ec2fd57a3987ed450081 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 3 Jul 2026 11:47:56 -0700
Subject: [PATCH] feat: add truncated tooltip

---
 .../ui/ProjectDownloadModal/DownloadDependency.vue | 14 ++++++++++++--
 .../ui/ProjectDownloadModal/DownloadProject.vue    | 14 ++++++++++----
 .../components/ui/ProjectDownloadModal/index.vue   | 12 ++++++++++--
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue
index 906d49fb56..1532f6fde2 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue
@@ -19,6 +19,8 @@
 				</span>
 				<a
 					v-if="dependency.projectHref"
+					ref="dependencyNameRef"
+					v-tooltip="truncatedTooltip(dependencyNameRef, dependency.name)"
 					:href="dependency.projectHref"
 					target="_blank"
 					rel="noopener noreferrer"
@@ -26,7 +28,12 @@
 				>
 					{{ dependency.name }}
 				</a>
-				<span v-else class="min-w-0 truncate text-base font-semibold text-contrast">
+				<span
+					v-else
+					ref="dependencyNameRef"
+					v-tooltip="truncatedTooltip(dependencyNameRef, dependency.name)"
+					class="min-w-0 truncate text-base font-semibold text-contrast"
+				>
 					{{ dependency.name }}
 				</span>
 				<TagItem class="shrink-0 border !border-solid border-surface-5 !px-3 !py-1 text-base">
@@ -71,7 +78,8 @@
 
 <script setup lang="ts">
 import { DownloadIcon, PackageIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, TagItem } from '@modrinth/ui'
+import { Avatar, ButtonStyled, TagItem, truncatedTooltip } from '@modrinth/ui'
+import { ref } from 'vue'
 
 defineOptions({
 	name: 'DownloadDependency',
@@ -96,4 +104,6 @@ defineProps<{
 const emit = defineEmits<{
 	download: []
 }>()
+
+const dependencyNameRef = ref<HTMLElement | null>(null)
 </script>
diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadProject.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadProject.vue
index 84767e4972..d14cdef685 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadProject.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadProject.vue
@@ -75,13 +75,15 @@
 		<div class="flex min-w-0 flex-col gap-1">
 			<div class="flex min-w-0 items-center gap-2">
 				<nuxt-link
-					v-tooltip="selectedVersion.version_number"
+					v-tooltip="truncatedTooltip(versionNumberRef, selectedVersion.version_number)"
 					:to="`/${project.project_type}/${project.slug || project.id}/version/${selectedVersion.id}`"
 					target="_blank"
 					rel="noopener noreferrer"
-					class="block min-w-0 truncate font-semibold text-contrast no-underline hover:underline"
+					class="block min-w-0 text-contrast no-underline hover:underline"
 				>
-					{{ selectedVersion.version_number }}
+					<span ref="versionNumberRef" class="block truncate font-semibold">
+						{{ selectedVersion.version_number }}
+					</span>
 				</nuxt-link>
 				<VersionChannelTag
 					:channel="selectedVersion.version_type"
@@ -89,7 +91,8 @@
 				/>
 			</div>
 			<p
-				v-tooltip="selectedVersion.name"
+				ref="versionNameRef"
+				v-tooltip="truncatedTooltip(versionNameRef, selectedVersion.name)"
 				class="m-0 w-fit max-w-full truncate text-sm text-secondary"
 			>
 				{{ selectedVersion.name }}
@@ -132,6 +135,7 @@ import {
 	type ComboboxOption,
 	defineMessages,
 	getTagMessage,
+	truncatedTooltip,
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
@@ -193,6 +197,8 @@ const userSelectedGameVersion = ref<string | null>(props.initialGameVersion)
 const userSelectedPlatform = ref<string | null>(props.initialPlatform)
 const showAllVersions = ref(defaultShowAllVersions())
 const versionFilter = ref('')
+const versionNumberRef = ref<HTMLElement | null>(null)
+const versionNameRef = ref<HTMLElement | null>(null)
 
 const incompatibleGameVersionsSet = computed(() => new Set(props.incompatibleGameVersions))
 const incompatibleLoadersSet = computed(() => new Set(props.incompatibleLoaders))
diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
index 2d3d895e4d..9300fe7bdf 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
@@ -3,10 +3,11 @@
 		<template v-if="project" #title>
 			<Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" />
 			<div
+				ref="downloadTitleRef"
 				class="truncate text-lg font-extrabold text-contrast"
-				v-tooltip="formatMessage(messages.downloadTitle, { title: project.title })"
+				v-tooltip="truncatedTooltip(downloadTitleRef, downloadTitle)"
 			>
-				{{ formatMessage(messages.downloadTitle, { title: project.title }) }}
+				{{ downloadTitle }}
 			</div>
 		</template>
 		<template #default>
@@ -89,6 +90,7 @@ import {
 	injectModrinthClient,
 	NewModal,
 	ServersPromo,
+	truncatedTooltip,
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
@@ -160,6 +162,7 @@ const { formatMessage } = useVIntl()
 const debug = useDebugLogger('DownloadModal')
 
 const modal = ref<NewModalRef | null>(null)
+const downloadTitleRef = ref<HTMLElement | null>(null)
 const modalOpen = ref(false)
 const showProjectId = ref<string | null>(null)
 const showOptions = ref<ResolvedProjectDownloadModalShowOptions>(getDefaultShowOptions())
@@ -193,6 +196,11 @@ const project = computed<DownloadModalProject | null>(() => {
 	}
 })
 
+const downloadTitle = computed(() => {
+	if (!project.value) return ''
+	return formatMessage(messages.downloadTitle, { title: project.value.title })
+})
+
 const versionsEnabled = ref(false)
 const {
 	data: versionsV3,