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

web/src/components/AppSwitch.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type Slots = 'root' | 'container' | 'wrapper' | 'label' | 'description'
+
+const props = defineProps<{
+	ui?: Partial<Record<Slots, string>>
+}>()
+
+const ui = computed(() => ({
+	...props.ui,
+	container: ['h-4.5', props.ui?.container].filter(Boolean).join(' '),
+	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',
+}))
+</script>
+
+<template>
+	<USwitch :ui="ui" />
+</template>

web/src/components/EditorHeader.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import ArticleStatusBadge from '@/components/ArticleStatusBadge.vue'
@@ -55,14 +56,11 @@ const previewOn = defineModel<boolean>('preview', { required: true })
 		<SaveStatus :state="state" :saved-at="savedAt" @retry="emit('retry')" />
 		<span class="ml-auto font-mono text-xs text-muted lg:hidden">{{ countText }}</span>
 		<div class="hidden items-center gap-3 lg:flex">
-			<USwitch
+			<AppSwitch
 				v-model="previewOn"
 				:label="t('Preview')"
 				:ui="{
 					root: 'items-center gap-2',
-					container: 'h-auto',
-					base: 'h-4.5 w-8 p-0.5',
-					thumb: 'size-3.5 bg-default data-[state=checked]:translate-x-2.5',
 					wrapper: 'ms-0',
 					label: 'text-sm font-normal text-toned',
 				}"

web/src/components/LinkModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 import type { MessageKey } from '@/i18n/messages'
 
@@ -226,14 +227,11 @@ function onCancel() {
 						class="w-full min-w-0"
 					/>
 				</UFormField>
-				<USwitch
+				<AppSwitch
 					v-model="newTabValue"
 					:label="t('Open in new tab')"
 					:ui="{
 						root: 'min-h-11 items-center gap-3 md:min-h-10',
-						container: 'h-auto',
-						base: 'h-4.5 w-8 p-0.5',
-						thumb: 'size-3.5 bg-default data-[state=checked]:translate-x-2.5',
 						wrapper: 'ms-0',
 						label: 'text-base font-medium text-highlighted',
 					}"

web/src/components/MediaCleanupCard.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed, nextTick, ref, watch } from 'vue'
@@ -286,11 +287,10 @@ function reviewDuplicates() {
 						</span>
 					</div>
 					<div class="flex h-11 w-11 shrink-0 items-center justify-center md:h-6 md:w-9">
-						<USwitch
+						<AppSwitch
 							:model-value="switchChecked"
 							:disabled="controlsDisabled"
 							aria-labelledby="auto-purge-label"
-							:ui="{ base: 'data-[disabled]:opacity-40' }"
 							@update:model-value="toggle"
 						/>
 					</div>

web/src/components/SeoPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed, nextTick, ref } from 'vue'
@@ -439,7 +440,7 @@ function submit() {
 				@leave="canonicalBlocked"
 			/>
 
-			<USwitch
+			<AppSwitch
 				:model-value="seo.noindex"
 				:label="t('Hide from search engines')"
 				:description="
@@ -447,8 +448,7 @@ function submit() {
 				"
 				:ui="{
 					root: 'items-start gap-3',
-					base: 'mt-0.5 h-4.5 w-8',
-					thumb: 'size-3.5',
+					container: 'mt-0.5',
 					label: 'font-medium text-highlighted',
 					description: 'text-xs/4.5 text-pretty text-muted',
 				}"

web/src/components/SiteFormPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed, reactive, ref } from 'vue'
@@ -544,15 +545,14 @@ async function submit() {
 			/>
 		</DirectoryField>
 
-		<USwitch
+		<AppSwitch
 			v-model="values.makeDefault"
 			:disabled="isCurrentDefault"
 			:label="switchLabel"
 			:description="switchHelp"
 			:ui="{
 				root: 'items-start gap-3',
-				base: 'mt-0.5 h-4.5 w-8',
-				thumb: 'size-3.5',
+				container: 'mt-0.5',
 				label: 'font-medium text-highlighted',
 				description: 'text-xs/4.5 text-pretty text-muted',
 			}"

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">