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

web/src/components/variants/VariantPreviewDialog.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { SHEET_CONTENT_CLASS, SHEET_FOOTER_CLASS } from '@/components/sheetClasses'
 import { t } from '@/i18n'
 
 import { computed } from 'vue'
@@ -41,14 +42,13 @@ const originalTitle = computed(
 		:title="t('Preview: {0}', [variant.name])"
 		:description="t('Both images are shown at actual size. Scroll to pan.')"
 		:ui="{
-			content:
-				'sm:top-20 sm:translate-y-0 sm:max-w-220 max-sm:!inset-x-4 max-sm:!top-auto max-sm:!bottom-4 max-sm:!w-auto max-sm:!max-w-none max-sm:!translate-x-0 max-sm:!translate-y-0 divide-y-0 shadow-(--shadow-modal) ring-0',
+			content: `${SHEET_CONTENT_CLASS} sm:top-20 sm:max-w-220`,
 			header: 'min-h-0 px-6 pt-5 pb-0 sm:px-6',
-			close: 'top-5 end-6',
+			close: 'top-5 end-6 max-sm:top-8 max-sm:size-11 max-sm:justify-center',
 			title: 'text-lg/6 font-semibold',
 			description: 'sr-only',
 			body: 'px-6 pt-5 pb-0 sm:px-6 sm:pt-5 sm:pb-0',
-			footer: 'px-6 py-5 sm:px-6',
+			footer: SHEET_FOOTER_CLASS,
 		}"
 	>
 		<template #body>