fix: route every toggle switch in the SPA through one new component, for one correct geometry

web/src/components/variants/VariantFormFields.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed } from 'vue'
@@ -360,15 +361,10 @@ function setFormat(value: unknown) {
 						}}</span>
 					</div>
 					<div class="pt-0.5">
-						<USwitch
+						<AppSwitch
 							v-model="values.generateOnUpload"
 							:disabled="disabled"
 							aria-labelledby="generate-on-upload-label"
-							:ui="{
-								container: 'h-4.5',
-								base: 'relative h-4.5 w-8 before:absolute before:-inset-3.5 disabled:opacity-40 sm:before:hidden',
-								thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
-							}"
 						/>
 					</div>
 				</div>
@@ -382,15 +378,10 @@ function setFormat(value: unknown) {
 						}}</span>
 					</div>
 					<div class="pt-0.5">
-						<USwitch
+						<AppSwitch
 							v-model="values.enabled"
 							:disabled="disabled"
 							aria-labelledby="variant-enabled-label"
-							:ui="{
-								container: 'h-4.5',
-								base: 'relative h-4.5 w-8 before:absolute before:-inset-3.5 disabled:opacity-40 sm:before:hidden',
-								thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
-							}"
 						/>
 					</div>
 				</div>

web/src/components/variants/VariantStatusSwitch.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed } from 'vue'
@@ -36,15 +37,10 @@ const tone = computed(() => {
 
 <template>
 	<div class="flex items-center gap-2 whitespace-nowrap" :class="tone">
-		<USwitch
+		<AppSwitch
 			:model-value="enabled"
 			:disabled="locked"
 			:aria-label="t('Enable variant {0}', [name])"
-			:ui="{
-				container: 'h-4.5',
-				base: 'relative h-4.5 w-8 before:absolute before:-inset-3.5 data-[disabled]:opacity-40 sm:before:hidden',
-				thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
-			}"
 			@update:model-value="emit('toggle', $event)"
 		/>
 		<span class="flex items-center gap-1">