fix: visuals reference matching overhaul and better workflow

web/src/components/ConfirmDialog.vue

@@ -76,7 +76,12 @@ function onCancel() {
 		:content="{ role: 'alertdialog', 'aria-busy': pending ? 'true' : undefined }"
 		:ui="{
 			content:
-				'max-sm:!inset-x-0 max-sm:!bottom-0 max-sm:!top-auto max-sm:!left-0 max-sm:!right-0 max-sm:!translate-x-0 max-sm:!translate-y-0 max-sm:!w-full max-sm:!max-w-none',
+				'divide-y-0 shadow-(--shadow-modal) ring-0 sm:top-[220px] sm:max-w-110 sm:translate-y-0 max-sm:!inset-x-4 max-sm:!top-auto max-sm:!bottom-4 max-sm:!left-4 max-sm:!w-auto max-sm:!max-w-none max-sm:!translate-x-0 max-sm:!translate-y-0',
+			header: 'min-h-0 px-6 pt-6 pb-0 sm:px-6 max-sm:px-5 max-sm:pt-5',
+			title: 'text-lg max-sm:text-[1.0625rem]/6',
+			description: 'mt-2 text-base text-toned max-sm:text-[0.9375rem]/[23px]',
+			body: 'px-6 pt-4 pb-0 sm:px-6 sm:pt-4 sm:pb-0 max-sm:px-5',
+			footer: 'p-6 sm:px-6 max-sm:p-5',
 		}"
 	>
 		<template v-if="error" #body>
@@ -96,7 +101,7 @@ function onCancel() {
 					color="neutral"
 					variant="outline"
 					block
-					class="sm:w-auto"
+					class="h-11 justify-center text-[0.9375rem] text-highlighted disabled:text-dimmed disabled:opacity-100 sm:h-8 sm:w-auto sm:px-3 sm:text-sm"
 					:disabled="pending"
 					@click="onCancel"
 				>
@@ -107,7 +112,7 @@ function onCancel() {
 					:loading="pending"
 					:disabled="pending"
 					block
-					class="sm:w-auto"
+					class="h-11 justify-center text-[0.9375rem] sm:h-8 sm:w-auto sm:px-3 sm:text-sm"
 					@click="onConfirm"
 				>
 					{{ confirmText }}