From 5a2c6b582fbac2d55c8a6e74f34b161305a27b3e Mon Sep 17 00:00:00 2001
From: z0 <aervxa@gmail.com>
Date: Fri, 16 Jan 2026 18:57:27 +0300
Subject: [PATCH 1/4] Improved UX for switching modpack versions

Signed-off-by: z0 <aervxa@gmail.com>
---
 .../src/components/ui/ModpackVersionModal.vue | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
index f804be5870..393451a946 100644
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { CheckIcon } from '@modrinth/assets'
+import { CheckIcon, ExternalIcon } from '@modrinth/assets'
 import { Badge, Button } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
@@ -65,13 +65,13 @@ const onHide = () => {
 						<div class="table-cell table-text download-cell" />
 						<div class="name-cell table-cell table-text">Name</div>
 						<div class="table-cell table-text">Supports</div>
+						<div class="table-cell table-text download-cell" />
 					</div>
 					<div class="scrollable">
 						<div
 							v-for="version in filteredVersions"
 							:key="version.id"
-							class="table-row with-columns selectable"
-							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
+							class="table-row with-columns"
 						>
 							<div class="table-cell table-text">
 								<Button
@@ -80,8 +80,14 @@ const onHide = () => {
 									:disabled="inProgress || installing || version.id === installedVersion"
 									@click.stop="() => switchVersion(version.id)"
 								>
-									<SwapIcon v-if="version.id !== installedVersion" />
-									<CheckIcon v-else />
+									<template v-if="version.id !== installedVersion">
+										<SwapIcon />
+										Select
+									</template>
+									<template v-else>
+										<CheckIcon />
+										Selected
+									</template>
 								</Button>
 							</div>
 							<div class="name-cell table-cell table-text">
@@ -115,6 +121,14 @@ const onHide = () => {
 									{{ version.game_versions.join(', ') }}
 								</span>
 							</div>
+							<div class="table-cell table-text">
+								<Button
+									icon-only
+									@click.stop="$router.push(`/project/${version.project_id}/version/${version.id}`)"
+								>
+									<ExternalIcon />
+								</Button>
+							</div>
 						</div>
 					</div>
 				</div>

From 456869ed006f31c244dfe5b49059909bfca9bcb5 Mon Sep 17 00:00:00 2001
From: z0 <aervxa@gmail.com>
Date: Fri, 16 Jan 2026 19:00:58 +0300
Subject: [PATCH 2/4] Bug fix: remove "icon-only" prop in switch version button

fix for previous commit which added text to the buttons

Signed-off-by: z0 <aervxa@gmail.com>
---
 apps/app-frontend/src/components/ui/ModpackVersionModal.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
index 393451a946..78836bc891 100644
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -76,7 +76,6 @@ const onHide = () => {
 							<div class="table-cell table-text">
 								<Button
 									:color="version.id === installedVersion ? '' : 'primary'"
-									icon-only
 									:disabled="inProgress || installing || version.id === installedVersion"
 									@click.stop="() => switchVersion(version.id)"
 								>

From 16db8237f4805cf77d2d8ba8be579a4dde279815 Mon Sep 17 00:00:00 2001
From: zorvi <aervxa@gmail.com>
Date: Fri, 16 Jan 2026 19:56:07 +0300
Subject: [PATCH 3/4] Revert removal of icon-only in switch button

---
 .../src/components/ui/ModpackVersionModal.vue         | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
index 78836bc891..33c7a47a82 100644
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -76,17 +76,12 @@ const onHide = () => {
 							<div class="table-cell table-text">
 								<Button
 									:color="version.id === installedVersion ? '' : 'primary'"
+									icon-only
 									:disabled="inProgress || installing || version.id === installedVersion"
 									@click.stop="() => switchVersion(version.id)"
 								>
-									<template v-if="version.id !== installedVersion">
-										<SwapIcon />
-										Select
-									</template>
-									<template v-else>
-										<CheckIcon />
-										Selected
-									</template>
+									<SwapIcon v-if="version.id !== installedVersion" />
+									<CheckIcon v-else />
 								</Button>
 							</div>
 							<div class="name-cell table-cell table-text">

From c41e6f32ad580ca552cf6969098145622065a33c Mon Sep 17 00:00:00 2001
From: zorvi <aervxa@gmail.com>
Date: Fri, 16 Jan 2026 19:58:41 +0300
Subject: [PATCH 4/4] Style fix: add fourth column into grid-template-column

---
 apps/app-frontend/src/components/ui/ModpackVersionModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
index 33c7a47a82..9f0c52ace0 100644
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -142,7 +142,7 @@ const onHide = () => {
 }
 
 .with-columns {
-	grid-template-columns: min-content 1fr 1fr;
+	grid-template-columns: min-content 1fr 1fr min-content;
 }
 
 .scrollable {