From 98cb6b6b44a435db860ac40c2ddd91ed65e18600 Mon Sep 17 00:00:00 2001
From: "Calum H." <calum@modrinth.com>
Date: Mon, 10 Aug 2026 16:15:27 +0100
Subject: [PATCH] fix: buttons qa (#7067)

* fix: broken minecraft required modal button

* fix: app close icon issue

* fix: versions tooltip missing

* fix: instance not found bug on btn press
---
 .../src/components/ui/WindowControls.vue             |  3 +--
 .../MinecraftRequiredModal.vue                       | 12 +++---------
 .../src/pages/instance/content/index.vue             |  8 ++++----
 apps/app-frontend/src/pages/instance/layout.vue      |  3 ++-
 apps/app-frontend/src/pages/project/Version.vue      |  9 ++++++++-
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/WindowControls.vue b/apps/app-frontend/src/components/ui/WindowControls.vue
index 38f00cd1fb..81797ba5fa 100644
--- a/apps/app-frontend/src/components/ui/WindowControls.vue
+++ b/apps/app-frontend/src/components/ui/WindowControls.vue
@@ -23,9 +23,8 @@
 		</IconButton>
 		<IconButton
 			type="quiet"
-			color="red"
 			label="Close window"
-			class="relative expanded-button close-button hover:!bg-red focus-visible:!bg-red"
+			class="relative expanded-button close-button"
 			@click="handleClose"
 		>
 			<XIcon />
diff --git a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
index 4472906316..c22b268e2a 100644
--- a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
+++ b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
@@ -20,18 +20,12 @@
 		</div>
 
 		<div class="flex flex-col gap-6 px-6 pb-6">
-			<div class="flex justify-end gap-2">
-				<ButtonLink class="w-full" href="https://support.modrinth.com" @click="modal?.hide()">
+			<div class="grid grid-cols-2 gap-2">
+				<ButtonLink href="https://support.modrinth.com" @click="modal?.hide()">
 					<MessagesSquareIcon />
 					{{ formatMessage(messages.getSupport) }}
 				</ButtonLink>
-				<Button
-					type="colored"
-					color="brand"
-					class="w-full"
-					:disabled="loadingSignIn"
-					@click="signIn"
-				>
+				<Button type="colored" color="brand" :disabled="loadingSignIn" @click="signIn">
 					<SpinnerIcon v-if="loadingSignIn" class="animate-spin" />
 					<svg
 						v-else
diff --git a/apps/app-frontend/src/pages/instance/content/index.vue b/apps/app-frontend/src/pages/instance/content/index.vue
index 572bf05758..080f09026a 100644
--- a/apps/app-frontend/src/pages/instance/content/index.vue
+++ b/apps/app-frontend/src/pages/instance/content/index.vue
@@ -1385,14 +1385,14 @@ provideContentManager({
 				project: linkedModpackProject.value,
 				projectLink: {
 					path: `/project/${linkedModpackProject.value.slug ?? linkedModpackProject.value.id}`,
-					query: { i: instance.value.id },
+					query: { i: instancePage.instanceId.value },
 				},
 				version: linkedModpackVersion.value ?? undefined,
 				versionLink:
 					linkedModpackProject.value && linkedModpackVersion.value
 						? {
 								path: `/project/${linkedModpackProject.value.slug ?? linkedModpackProject.value.id}/version/${linkedModpackVersion.value.id}`,
-								query: { i: instance.value.id },
+								query: { i: instancePage.instanceId.value },
 							}
 						: undefined,
 				owner: linkedModpackOwner.value
@@ -1479,7 +1479,7 @@ provideContentManager({
 			icon_url: null,
 		},
 		projectLink: item.project?.id
-			? { path: `/project/${item.project.id}`, query: { i: instance.value.id } }
+			? { path: `/project/${item.project.id}`, query: { i: instancePage.instanceId.value } }
 			: undefined,
 		version: item.version ?? {
 			id: item.file_name,
@@ -1490,7 +1490,7 @@ provideContentManager({
 			item.project?.id && item.version?.id
 				? {
 						path: `/project/${item.project.id}/version/${item.version.id}`,
-						query: { i: instance.value.id },
+						query: { i: instancePage.instanceId.value },
 					}
 				: undefined,
 		owner: item.owner
diff --git a/apps/app-frontend/src/pages/instance/layout.vue b/apps/app-frontend/src/pages/instance/layout.vue
index 5a903e1ce5..caffa1404a 100644
--- a/apps/app-frontend/src/pages/instance/layout.vue
+++ b/apps/app-frontend/src/pages/instance/layout.vue
@@ -180,7 +180,7 @@ const showInstancePlayTime = computed(() => themeStore.getFeatureFlag('show_inst
 
 const online = useOnline()
 const offline = computed(() => !online.value)
-const instanceId = computed(() => String(route.params.id ?? ''))
+const instanceId = ref(String(route.params.id ?? ''))
 const instanceQuery = useQuery(
 	computed(() => ({
 		...instanceDetailQueryOptions(instanceId.value),
@@ -259,6 +259,7 @@ onBeforeRouteUpdate(async (to, from) => {
 
 	try {
 		await ensureCriticalInstanceData(targetInstanceId)
+		instanceId.value = targetInstanceId
 	} catch (error) {
 		if (isUnmanagedInstanceError(error)) return { path: '/' }
 		handleError(error)
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index 3d3bd2a2cd..83390cabb4 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/apps/app-frontend/src/pages/project/Version.vue
@@ -14,8 +14,13 @@
 			:members="members"
 			:dependency-link-creator="createDependencyLink"
 		>
-			<template #headerActions>
+			<template #headerActions="{ primaryFile }">
 				<Button
+					v-tooltip="
+						primaryFile?.url
+							? primaryFile.filename + ' (' + formatBytes(primaryFile.size) + ')'
+							: undefined
+					"
 					type="colored"
 					color="brand"
 					:disabled="installing || (installed && installedVersion === version.id)"
@@ -92,6 +97,7 @@ import {
 	commonMessages,
 	defineMessages,
 	type DependencyContext,
+	useFormatBytes,
 	useVIntl,
 	VersionPage,
 } from '@modrinth/ui'
@@ -103,6 +109,7 @@ import { get_project_many, get_version_many } from '@/helpers/cache.js'
 import { useBreadcrumb } from '@/providers/breadcrumbs'
 
 const { formatMessage } = useVIntl()
+const formatBytes = useFormatBytes()
 
 const messages = defineMessages({
 	allVersions: {