fix: final content tab qa (#5611)

* fix: queued admonition always showing

* fix: dont apply grayscale to checkbox in content card item

* fix: actual stable id for disable/enable/bulk state

* fix: vue-router resolve workaround

* fix: show disable/enable btns same time

* fix: remove mr-2 on toggle

* fix: type errors + add ModpackAlreadyInstalledModal

* fix: bulk actions + overflow menu hitting ad container

* fix: responsiveness of ContentSelectionBar

* feat: better backup naming for inline backups + sorting fixes

* fix: lint

* fix: typo

packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue

@@ -17,7 +17,7 @@
 			</Admonition>
 			<InlineBackupCreator
 				ref="backupCreator"
-				:backup-name="downgrade ? 'Before modpack downgrade' : 'Before modpack update'"
+				:backup-name="backupName"
 				@update:buttons-disabled="buttonsDisabled = $event"
 			/>
 		</div>
@@ -45,7 +45,7 @@
 
 <script setup lang="ts">
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
@@ -55,13 +55,21 @@ import { commonMessages } from '#ui/utils/common-messages'
 
 import InlineBackupCreator from './InlineBackupCreator.vue'
 
-defineProps<{
+const props = defineProps<{
 	downgrade?: boolean
 	server?: boolean
+	backupTip?: string
 }>()
 
 const { formatMessage } = useVIntl()
 
+const backupName = computed(() => {
+	const action = props.downgrade ? 'downgrade' : 'update'
+	return props.backupTip
+		? `Before modpack ${action} (${props.backupTip})`
+		: `Before modpack ${action}`
+})
+
 const messages = defineMessages({
 	header: {
 		id: 'content.confirm-modpack-update.header',