fix: panel issues w/ backups (#7009)

packages/ui/src/components/base/ErrorInformationCard.vue

@@ -52,7 +52,7 @@
 				:color="action.color === 'standard' ? undefined : (action.color ?? 'brand')"
 				size="xl"
 				:disabled="action.disabled"
-				class="!w-full"
+				class="flex-1"
 				@click="action.onClick"
 			>
 				<component :is="action.icon" v-if="action.icon && !action.showAltIcon" class="size-4" />
@@ -64,7 +64,7 @@
 				{{ action.label }}
 			</Button>
 
-			<Button v-if="errorDetails" size="xl" class="!w-full" @click="copyErrorInformation">
+			<Button v-if="errorDetails" size="xl" class="flex-1" @click="copyErrorInformation">
 				<CopyIcon v-if="!infoCopied" class="size-4" />
 				<CheckIcon v-else class="size-4" />
 				Copy Information

packages/ui/src/components/servers/backups/BackupItem.vue

@@ -112,7 +112,8 @@ const overflowMenuOptions = computed<OverflowMenuOption[]>(() => {
 	options.push({
 		id: 'download',
 		label: formatMessage(commonMessages.downloadButton),
-		action: () => emit('download'),
+		type: 'link',
+		href: `https://${props.kyrosUrl}/modrinth/v0/backups/${props.backup.id}/download?auth=${props.jwt}`,
 		disabled: !props.kyrosUrl || !props.jwt,
 	})
 
@@ -279,7 +280,12 @@ const creatorAvatarSrc = computed(() =>
 				<RotateCounterClockwiseIcon class="size-5" />
 				{{ formatMessage(messages.restore) }}
 			</Button>
-			<TeleportOverflowMenu type="quiet" label="More options" :options="overflowMenuOptions">
+			<TeleportOverflowMenu
+				type="quiet"
+				label="More options"
+				:options="overflowMenuOptions"
+				@select="(option) => option.id === 'download' && emit('download')"
+			>
 				<MoreVerticalIcon class="size-5" />
 				<template #copy-id>
 					<ClipboardCopyIcon class="size-5" />