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>