@cat-factory/app 0.307.1 → 0.309.0

package/app/components/settings/CapabilityCredentialsPanel.vue

@@ -173,7 +173,7 @@ async function removeKey(key: string) {
         </li>
       </ul>
 
-      <p v-if="entry.stored && entry.updatedAt" class="text-[11px] text-dimmed">
+      <p v-if="entry.stored && entry.updatedAt" class="text-2xs text-dimmed">
         {{
           t('settings.capabilityCredentials.storedAt', {
             date: d(new Date(entry.updatedAt), 'short'),
@@ -191,13 +191,13 @@ async function removeKey(key: string) {
            usual one, but a facade that wired the store and dropped the flag lands here too, and
            blaming a custom resolver would make that wiring bug read as a deliberate configuration
            and send the operator to the one place that cannot explain it. -->
-      <p v-else-if="view?.environmentFallback === true" class="text-[11px] text-dimmed">
+      <p v-else-if="view?.environmentFallback === true" class="text-2xs text-dimmed">
         {{ t('settings.capabilityCredentials.notStoredWithFallback') }}
       </p>
-      <p v-else-if="view?.environmentFallback === false" class="text-[11px] text-app-warning-400">
+      <p v-else-if="view?.environmentFallback === false" class="text-2xs text-app-warning-400">
         {{ t('settings.capabilityCredentials.notStored') }}
       </p>
-      <p v-else class="text-[11px] text-dimmed">
+      <p v-else class="text-2xs text-dimmed">
         {{ t('settings.capabilityCredentials.notStoredUnknownFallback') }}
       </p>
 
@@ -268,7 +268,7 @@ async function removeKey(key: string) {
       >
         <div class="min-w-0">
           <code class="font-mono text-sm">{{ orphan.key }}</code>
-          <span class="block text-[11px] text-dimmed">
+          <span class="block text-2xs text-dimmed">
             {{
               t('settings.capabilityCredentials.storedAt', {
                 date: d(new Date(orphan.updatedAt), 'short'),

package/app/components/settings/CloudflareHandlerSection.vue

@@ -147,7 +147,7 @@ async function remove() {
     <h3 class="text-sm font-semibold text-default">
       {{ t('inspector.testConfig.provisionTypes.cloudflare') }}
     </h3>
-    <p class="text-[11px] text-muted">
+    <p class="text-2xs text-muted">
       {{ t('settings.infrastructure.cloudflare.intro') }}
     </p>
 
@@ -162,7 +162,7 @@ async function remove() {
           disabled
           size="lg"
           :label="t('settings.infrastructure.handler.connectionEstablished')"
-          :ui="{ label: 'text-[13px] font-semibold text-app-success-300' }"
+          :ui="{ label: 'text-sm font-semibold text-app-success-300' }"
         />
         <div class="flex items-center gap-1">
           <UButton
@@ -185,31 +185,31 @@ async function remove() {
           />
         </div>
       </div>
-      <p class="pl-7 text-[11px] text-toned">
+      <p class="pl-7 text-2xs text-toned">
         {{ t('settings.infrastructure.cloudflare.connectedAs', { subdomain: workersSubdomain }) }}
       </p>
     </div>
 
     <div v-else class="space-y-2" data-testid="cloudflare-handler-form">
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('settings.infrastructure.cloudflare.label')
         }}</label>
         <UInput v-model="label" size="xs" />
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('settings.infrastructure.cloudflare.subdomain')
         }}</label>
         <UInput v-model="workersSubdomain" size="xs" placeholder="my-account" />
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('settings.infrastructure.cloudflare.subdomainHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('settings.infrastructure.cloudflare.token')
         }}</label>
         <UInput
@@ -222,28 +222,28 @@ async function remove() {
               : t('settings.infrastructure.cloudflare.tokenPlaceholder')
           "
         />
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('settings.infrastructure.cloudflare.tokenHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('settings.infrastructure.cloudflare.repo')
         }}</label>
         <UInput v-model="repo" size="xs" placeholder="owner/repo" />
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('settings.infrastructure.cloudflare.repoHint') }}
         </p>
       </div>
 
       <details class="rounded-md border border-muted/70 p-2">
-        <summary class="cursor-pointer text-[11px] text-muted">
+        <summary class="cursor-pointer text-2xs text-muted">
           {{ t('settings.infrastructure.cloudflare.advanced') }}
         </summary>
         <div class="mt-2 space-y-2">
           <div class="space-y-1">
-            <label class="text-[11px] text-muted">{{
+            <label class="text-2xs text-muted">{{
               t('settings.infrastructure.cloudflare.workerTemplate')
             }}</label>
             <!-- The placeholder is a FORMAT EXAMPLE containing vue-i18n metacharacters, so it
@@ -255,16 +255,16 @@ async function remove() {
             />
           </div>
           <div class="space-y-1">
-            <label class="text-[11px] text-muted">{{
+            <label class="text-2xs text-muted">{{
               t('settings.infrastructure.cloudflare.environmentTemplate')
             }}</label>
             <UInput v-model="environmentNameTemplate" size="xs" placeholder="pr-{{pullNumber}}" />
           </div>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('settings.infrastructure.cloudflare.templateHint') }}
           </p>
           <div class="space-y-1">
-            <label class="text-[11px] text-muted">{{
+            <label class="text-2xs text-muted">{{
               t('settings.infrastructure.cloudflare.apiBaseUrl')
             }}</label>
             <UInput v-model="apiBaseUrl" size="xs" placeholder="https://api.github.com" />
@@ -300,7 +300,7 @@ async function remove() {
 
       <p
         v-if="testResult"
-        class="text-[11px]"
+        class="text-2xs"
         :class="testResult.ok ? 'text-app-success-300' : 'text-app-error-300'"
       >
         {{ testResult.message }}

package/app/components/settings/ComposeEnvironmentSetupSection.vue

@@ -13,6 +13,8 @@
 // is a five-minute flow that touches a repo and can trial-provision a stack, so "when you need
 // this / when you don't" has to be answerable BEFORE opening it — most services on most boards
 // never need it at all.
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 const { t } = useI18n()
 const ui = useUiStore()
 
@@ -52,34 +54,34 @@ function start() {
       </p>
     </div>
 
-    <div class="rounded border border-default bg-default/40 p-3">
-      <p class="text-[11px] font-medium uppercase tracking-wide text-muted">
+    <div class="rounded-sm border border-default bg-default/40 p-3">
+      <SectionLabel as="p">
         {{ t('settings.composeEnvSetup.how.title') }}
-      </p>
-      <ol class="mt-2 list-decimal space-y-1 ps-4 text-[11px] leading-relaxed text-muted">
+      </SectionLabel>
+      <ol class="mt-2 list-decimal space-y-1 ps-4 text-2xs leading-relaxed text-muted">
         <li v-for="(step, i) in steps" :key="`how-${i}`">{{ step }}</li>
       </ol>
-      <p class="mt-2 text-[11px] leading-relaxed text-dimmed">
+      <p class="mt-2 text-2xs leading-relaxed text-dimmed">
         {{ t('settings.composeEnvSetup.how.outcome') }}
       </p>
     </div>
 
     <div class="grid gap-2 sm:grid-cols-2">
-      <div class="rounded border border-app-success-900/50 bg-app-success-950/20 p-3">
-        <p class="flex items-center gap-1.5 text-[11px] font-medium text-app-success-200/90">
+      <div class="rounded-sm border border-app-success-900/50 bg-app-success-950/20 p-3">
+        <p class="flex items-center gap-1.5 text-2xs font-medium text-app-success-200/90">
           <UIcon name="i-lucide-check" class="h-3.5 w-3.5 shrink-0" />
           {{ t('settings.composeEnvSetup.needed.title') }}
         </p>
-        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-muted">
+        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-2xs leading-relaxed text-muted">
           <li v-for="(item, i) in needed" :key="`need-${i}`">{{ item }}</li>
         </ul>
       </div>
-      <div class="rounded border border-default bg-default/40 p-3">
-        <p class="flex items-center gap-1.5 text-[11px] font-medium text-toned">
+      <div class="rounded-sm border border-default bg-default/40 p-3">
+        <p class="flex items-center gap-1.5 text-2xs font-medium text-toned">
           <UIcon name="i-lucide-minus" class="h-3.5 w-3.5 shrink-0" />
           {{ t('settings.composeEnvSetup.notNeeded.title') }}
         </p>
-        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-muted">
+        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-2xs leading-relaxed text-muted">
           <li v-for="(item, i) in notNeeded" :key="`skip-${i}`">{{ item }}</li>
         </ul>
       </div>
@@ -96,7 +98,7 @@ function start() {
       >
         {{ t('settings.composeEnvSetup.start') }}
       </UButton>
-      <span class="text-[11px] text-dimmed">{{ t('settings.composeEnvSetup.rerunHint') }}</span>
+      <span class="text-2xs text-dimmed">{{ t('settings.composeEnvSetup.rerunHint') }}</span>
     </div>
   </section>
 </template>

package/app/components/settings/ConnectionTestVerdict.vue

@@ -57,6 +57,6 @@ const detail = computed(() => (causeKey.value ? (props.result?.message ?? '') :
   </p>
   <div v-else-if="result" class="space-y-0.5" data-testid="connection-test-result">
     <p class="text-xs text-app-error-400 break-words">{{ headline }}</p>
-    <p v-if="detail" class="text-[11px] text-muted break-words">{{ detail }}</p>
+    <p v-if="detail" class="text-2xs text-muted break-words">{{ detail }}</p>
   </div>
 </template>

package/app/components/settings/ConsensusGroupsSection.vue

@@ -13,6 +13,7 @@ import { computed, ref } from 'vue'
 import type { ConsensusGroup, ConsensusStrategy } from '~/types/consensus'
 import { isSelectable } from '~/stores/models'
 import { uid } from '~/utils/catalog'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const groups = useConsensusGroupsStore()
@@ -264,8 +265,8 @@ async function remove(group: ConsensusGroup) {
               />
             </div>
           </div>
-          <p v-if="g.description" class="mt-1 text-[11px] text-muted">{{ g.description }}</p>
-          <div class="mt-1.5 text-[11px] text-muted">
+          <p v-if="g.description" class="mt-1 text-2xs text-muted">{{ g.description }}</p>
+          <div class="mt-1.5 text-2xs text-muted">
             {{ t(`pipeline.builder.strategyOption.${g.strategy}`) }}
             ·
             {{
@@ -287,9 +288,9 @@ async function remove(group: ConsensusGroup) {
     <div v-else class="space-y-4 rounded-xl border border-default bg-default/50 p-4">
       <div class="grid gap-3 sm:grid-cols-2">
         <div>
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('settings.consensusGroups.editor.nameLabel') }}
-          </label>
+          </SectionLabel>
           <UInput
             v-model="editor.name"
             size="sm"
@@ -298,12 +299,12 @@ async function remove(group: ConsensusGroup) {
           />
         </div>
         <div>
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('settings.consensusGroups.editor.strategyLabel') }}
-          </label>
+          </SectionLabel>
           <select
             v-model="editor.strategy"
-            class="w-full rounded border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
+            class="w-full rounded-sm border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
           >
             <option v-for="s in STRATEGIES" :key="s.value" :value="s.value">{{ s.label }}</option>
           </select>
@@ -311,9 +312,9 @@ async function remove(group: ConsensusGroup) {
       </div>
 
       <div>
-        <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="label" class="mb-1 block">
           {{ t('settings.consensusGroups.editor.descriptionLabel') }}
-        </label>
+        </SectionLabel>
         <UInput
           v-model="editor.description"
           size="sm"
@@ -325,9 +326,9 @@ async function remove(group: ConsensusGroup) {
       <!-- participants -->
       <div class="space-y-2">
         <div class="flex items-center justify-between">
-          <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="span">
             {{ t('settings.consensusGroups.editor.participantsLabel') }}
-          </span>
+          </SectionLabel>
           <UButton
             icon="i-lucide-plus"
             color="neutral"
@@ -337,7 +338,7 @@ async function remove(group: ConsensusGroup) {
             @click="addParticipant"
           />
         </div>
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('settings.consensusGroups.editor.participantsHint') }}
         </p>
         <div
@@ -359,7 +360,7 @@ async function remove(group: ConsensusGroup) {
           />
           <select
             v-model="p.modelId"
-            class="w-44 rounded border border-muted bg-default px-1.5 py-1 text-xs text-toned"
+            class="w-44 rounded-sm border border-muted bg-default px-1.5 py-1 text-xs text-toned"
           >
             <option :value="undefined">{{ t('settings.consensusGroups.editor.stepModel') }}</option>
             <option v-for="m in selectableModelIds" :key="m.id" :value="m.id">{{ m.label }}</option>
@@ -378,21 +379,21 @@ async function remove(group: ConsensusGroup) {
 
       <div class="grid gap-3 sm:grid-cols-2">
         <div>
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('settings.consensusGroups.editor.synthesizerLabel') }}
-          </label>
+          </SectionLabel>
           <select
             v-model="editor.synthesizerModelId"
-            class="w-full rounded border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
+            class="w-full rounded-sm border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
           >
             <option value="">{{ t('settings.consensusGroups.editor.stepModel') }}</option>
             <option v-for="m in selectableModelIds" :key="m.id" :value="m.id">{{ m.label }}</option>
           </select>
         </div>
         <div v-if="editor.strategy === 'debate'">
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('pipeline.builder.rounds') }}
-          </label>
+          </SectionLabel>
           <UInput v-model.number="editor.rounds" type="number" min="1" max="5" size="sm" />
         </div>
       </div>
@@ -403,7 +404,7 @@ async function remove(group: ConsensusGroup) {
           <input v-model="editor.gated" type="checkbox" class="accent-app-success-500" />
           {{ t('settings.consensusGroups.editor.gatedLabel') }}
         </label>
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('settings.consensusGroups.editor.gatedHint') }}
         </p>
         <div v-if="editor.gated" class="flex flex-wrap items-center gap-3 text-xs">
@@ -453,7 +454,7 @@ async function remove(group: ConsensusGroup) {
             />
           </label>
         </div>
-        <p v-if="gatingIncomplete" class="text-[11px] text-app-warning-400">
+        <p v-if="gatingIncomplete" class="text-2xs text-app-warning-400">
           {{ t('settings.consensusGroups.editor.gatingIncomplete') }}
         </p>
       </div>

package/app/components/settings/CustomManifestTypeEditor.vue

@@ -6,6 +6,7 @@
 // infraConfig store (`PUT|DELETE /environments/custom-types/:manifestId`).
 import { computed, reactive, ref } from 'vue'
 import type { CustomManifestType } from '@cat-factory/contracts'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const infra = useInfraConfigStore()
@@ -95,7 +96,7 @@ async function remove(type: CustomManifestType) {
       <h3 class="text-sm font-semibold text-default">
         {{ t('settings.infrastructure.customType.title') }}
       </h3>
-      <p class="text-[11px] text-dimmed">{{ t('settings.infrastructure.customType.hint') }}</p>
+      <p class="text-2xs text-dimmed">{{ t('settings.infrastructure.customType.hint') }}</p>
     </div>
 
     <!-- The catalog: registered (read-only) + workspace (editable). -->
@@ -107,7 +108,7 @@ async function remove(type: CustomManifestType) {
       >
         <div class="min-w-0">
           <div class="flex items-center gap-1.5">
-            <span class="truncate text-[13px] text-default">{{ type.label }}</span>
+            <span class="truncate text-sm text-default">{{ type.label }}</span>
             <UBadge
               :color="type.source === 'workspace' ? 'primary' : 'neutral'"
               variant="subtle"
@@ -116,8 +117,8 @@ async function remove(type: CustomManifestType) {
               {{ t(`settings.infrastructure.customType.source.${type.source}`) }}
             </UBadge>
           </div>
-          <code class="text-[11px] text-dimmed">{{ type.manifestId }}</code>
-          <p v-if="type.description" class="text-[11px] text-muted">{{ type.description }}</p>
+          <code class="text-2xs text-dimmed">{{ type.manifestId }}</code>
+          <p v-if="type.description" class="text-2xs text-muted">{{ type.description }}</p>
         </div>
         <div v-if="type.source === 'workspace'" class="flex shrink-0 items-center gap-0.5">
           <UButton
@@ -139,19 +140,19 @@ async function remove(type: CustomManifestType) {
         </div>
       </li>
     </ul>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ t('settings.infrastructure.customType.empty') }}
     </p>
 
     <!-- Add / edit a workspace-defined type. -->
     <div class="space-y-2 border-t border-default pt-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{
           editing
             ? t('settings.infrastructure.customType.editTitle', { id: draft.manifestId })
             : t('settings.infrastructure.customType.addTitle')
         }}
-      </p>
+      </SectionLabel>
       <UFormField
         v-if="!editing"
         :label="t('settings.infrastructure.customType.manifestId')"

package/app/components/settings/DefaultProvisionTypeSection.vue

@@ -105,7 +105,7 @@ async function save() {
       <h3 class="text-sm font-semibold text-default">
         {{ t('settings.defaultProvision.title') }}
       </h3>
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('settings.defaultProvision.hint') }}
       </p>
     </div>
@@ -125,7 +125,7 @@ async function save() {
     </div>
 
     <div v-if="selection.type === 'custom'" class="space-y-1">
-      <label class="text-[11px] text-muted">
+      <label class="text-2xs text-muted">
         {{ t('inspector.testConfig.customManifestId') }}
       </label>
       <USelect
@@ -138,7 +138,7 @@ async function save() {
         :placeholder="t('inspector.testConfig.customManifestIdPlaceholder')"
         @update:model-value="(v: string) => setManifestId(v)"
       />
-      <p v-else class="text-[11px] leading-snug text-app-warning-300/80">
+      <p v-else class="text-2xs leading-snug text-app-warning-300/80">
         {{ t('inspector.testConfig.customNoTypes') }}
       </p>
     </div>
@@ -147,7 +147,7 @@ async function save() {
          the workspace still has nothing stored. -->
     <p
       v-if="unset && selection.type"
-      class="text-[11px] leading-snug text-app-warning-300/80"
+      class="text-2xs leading-snug text-app-warning-300/80"
       data-testid="default-provision-suggestion-hint"
     >
       {{ t('settings.defaultProvision.suggestionHint') }}
@@ -165,7 +165,7 @@ async function save() {
       >
         {{ t('settings.defaultProvision.save') }}
       </UButton>
-      <span v-if="!unset && !dirty" class="text-[11px] text-dimmed">
+      <span v-if="!unset && !dirty" class="text-2xs text-dimmed">
         {{ t('settings.defaultProvision.savedState') }}
       </span>
     </div>

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -30,6 +30,7 @@ import CustomManifestTypeEditor from '~/components/settings/CustomManifestTypeEd
 import CloudflareHandlerSection from '~/components/settings/CloudflareHandlerSection.vue'
 import ConnectionTestVerdict from '~/components/settings/ConnectionTestVerdict.vue'
 import { consumeKubernetesScrollAnchor } from '~/components/settings/InfraHandlersConfigurator.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const infra = useInfraConfigStore()
@@ -442,7 +443,7 @@ function toastRemoved() {
             disabled
             size="lg"
             :label="t('settings.infrastructure.handler.connectionEstablished')"
-            :ui="{ label: 'text-[13px] font-semibold text-app-success-300' }"
+            :ui="{ label: 'text-sm font-semibold text-app-success-300' }"
           />
           <UButton
             icon="i-lucide-trash-2"
@@ -454,7 +455,7 @@ function toastRemoved() {
             @click="removeKube"
           />
         </div>
-        <p class="pl-7 text-[11px] text-toned">
+        <p class="pl-7 text-2xs text-toned">
           {{ t('settings.infrastructure.handler.activeEngine') }}
           <span class="text-default">{{ kubeHandlerEngineLabel }}</span>
         </p>
@@ -472,13 +473,13 @@ function toastRemoved() {
           <ConnectionTestVerdict :result="kubeSavedTestResult" />
         </div>
       </div>
-      <p v-else class="flex items-center gap-1.5 text-[12px] text-dimmed">
+      <p v-else class="flex items-center gap-1.5 text-xs text-dimmed">
         <UIcon name="i-lucide-circle-dashed" class="h-3.5 w-3.5" />
         {{ t('settings.infrastructure.handler.notConnected') }}
       </p>
 
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{
+        <span class="text-2xs text-muted">{{
           t('settings.infrastructure.handler.engineLabel')
         }}</span>
         <div class="flex flex-wrap gap-1">
@@ -513,9 +514,10 @@ function toastRemoved() {
 
       <!-- Local mode: a personal override for THIS machine, layered over the workspace handler. -->
       <div v-if="userOverridesOn" class="border-t border-default pt-2">
-        <button
+        <SectionLabel
+          as="button"
           type="button"
-          class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-dimmed hover:text-toned"
+          class="flex w-full items-center gap-1.5 text-start hover:text-default"
           @click="showKubeOverride = !showKubeOverride"
         >
           <UIcon
@@ -526,9 +528,9 @@ function toastRemoved() {
           <UBadge v-if="kubeUserHandler" color="primary" variant="subtle" size="sm">
             {{ t('settings.infrastructure.handler.overrideActive') }}
           </UBadge>
-        </button>
+        </SectionLabel>
         <div v-if="showKubeOverride" class="mt-2 space-y-2">
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('settings.infrastructure.handler.personalOverrideHint') }}
           </p>
           <p v-if="kubeUserHandler" class="flex justify-end">
@@ -562,7 +564,7 @@ function toastRemoved() {
       <h3 class="text-sm font-semibold text-default">
         {{ t('inspector.testConfig.provisionTypes.docker-compose') }}
       </h3>
-      <p class="text-[12px] text-muted">
+      <p class="text-xs text-muted">
         {{ t('settings.infrastructure.dockerComposeInfo') }}
       </p>
     </section>
@@ -580,9 +582,9 @@ function toastRemoved() {
       <CustomManifestTypeEditor />
 
       <div v-if="infra.customTypes.length" class="space-y-2 border-t border-default pt-3">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('settings.infrastructure.handler.customHandlerTitle') }}
-        </p>
+        </SectionLabel>
         <UFormField :label="t('settings.infrastructure.handler.customTypeLabel')">
           <USelect v-model="selectedCustomId" :items="customTypeItems" />
         </UFormField>
@@ -595,10 +597,7 @@ function toastRemoved() {
         >
           <USelect v-model="selectedBackendKind" :items="customBackendOptions" />
         </UFormField>
-        <p
-          v-if="customHandler"
-          class="flex items-center justify-between gap-2 text-[12px] text-toned"
-        >
+        <p v-if="customHandler" class="flex items-center justify-between gap-2 text-xs text-toned">
           <span class="text-app-success-400">{{
             t('settings.infrastructure.handler.customConnected')
           }}</span>

package/app/components/settings/InfrastructureBackendPicker.vue

@@ -288,12 +288,12 @@ const labelKey = computed(() =>
         />
         <span class="min-w-0">
           <span class="text-sm text-default">{{ item.label }}</span>
-          <span v-if="item.desc" class="block text-[11px] text-muted">{{ item.desc }}</span>
+          <span v-if="item.desc" class="block text-2xs text-muted">{{ item.desc }}</span>
         </span>
       </label>
     </div>
 
-    <p v-if="showRegisterHint" class="text-[11px] text-app-warning-300/80">
+    <p v-if="showRegisterHint" class="text-2xs text-app-warning-300/80">
       {{ t('settings.infrastructure.registerHint') }}
     </p>