feat(media): align visual checks and variant UI with merged design

web/src/views/SettingsView.vue

@@ -5,6 +5,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useLocalizedOverlay, useLocalizedToast } from '@/i18n/presentation'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import DashboardShell from '@/components/DashboardShell.vue'
+import MediaLinksCard from '@/components/MediaLinksCard.vue'
 import MediaCleanupCard from '@/components/MediaCleanupCard.vue'
 import RestartOverlay from '@/components/RestartOverlay.vue'
 import RetentionCard from '@/components/RetentionCard.vue'
@@ -378,6 +379,7 @@ onBeforeUnmount(() => {
 
 <template>
 	<DashboardShell
+		compact-padding
 		bleed-offline-banner
 		:offline-message="t(OFFLINE_COPY)"
 		offline-icon="i-lucide-wifi-off"
@@ -391,9 +393,9 @@ onBeforeUnmount(() => {
 			:now="update.restartNow"
 			@reload="reloadPage"
 		/>
-		<div class="flex max-w-164 flex-col gap-5" :inert="update.restartRun !== null">
+		<div class="flex max-w-164 flex-col gap-4" :inert="update.restartRun !== null">
 			<div class="flex flex-col gap-0.5">
-				<h1 class="text-xl font-semibold text-highlighted">
+				<h1 class="text-xl/7 font-semibold text-highlighted">
 					{{ t('Settings') }}
 				</h1>
 				<p class="text-muted">{{ t('Workspace information.') }}</p>
@@ -430,7 +432,9 @@ onBeforeUnmount(() => {
 				</UAlert>
 
 				<div v-else class="flex items-center justify-between gap-4">
-					<span class="text-[0.9375rem]/6 font-semibold text-highlighted">{{ t('Version') }}</span>
+					<span class="text-[0.9375rem]/6 font-semibold text-highlighted">{{
+						t('Version')
+					}}</span>
 					<USkeleton
 						v-if="loadState === 'loading' && showSkeleton"
 						data-testid="settings-skeleton"
@@ -459,6 +463,8 @@ onBeforeUnmount(() => {
 				@restart="onRestart"
 			/>
 
+			<MediaLinksCard />
+
 			<MediaCleanupCard />
 
 			<RetentionCard