@cat-factory/app 0.308.0 → 0.309.0

package/app/components/settings/ProviderManifestEditor.vue

@@ -22,6 +22,7 @@ import type { ProviderConnectionKind } from '~/types/providerConnections'
 import ConnectionWarnings from '~/components/settings/ConnectionWarnings.vue'
 import ConnectionTestVerdict from '~/components/settings/ConnectionTestVerdict.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   kind: ProviderConnectionKind
@@ -197,9 +198,9 @@ function onSave() {
 
 <template>
   <div class="space-y-3 rounded-lg border border-dashed border-muted p-3">
-    <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+    <SectionLabel as="p">
       {{ t('settings.providerConnection.manifestEditor.title') }}
-    </p>
+    </SectionLabel>
 
     <UFormField
       :label="t('settings.providerConnection.manifestEditor.jsonLabel')"
@@ -214,7 +215,7 @@ function onSave() {
       />
     </UFormField>
 
-    <p v-if="!savedManifest && !jsonError && !schemaError" class="text-[11px] text-dimmed">
+    <p v-if="!savedManifest && !jsonError && !schemaError" class="text-2xs text-dimmed">
       {{ t('settings.providerConnection.manifestEditor.starterHint') }}
     </p>
 
@@ -236,16 +237,16 @@ function onSave() {
 
     <!-- Secret sub-form: one write-only input per secret key the manifest references. -->
     <div class="space-y-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{ t('settings.providerConnection.manifestEditor.secretsLabel') }}
-      </p>
-      <p v-if="!secretKeys.length" class="text-[11px] text-dimmed">
+      </SectionLabel>
+      <p v-if="!secretKeys.length" class="text-2xs text-dimmed">
         {{ t('settings.providerConnection.manifestEditor.noSecrets') }}
       </p>
       <template v-else-if="connected">
         <p
           v-if="storedSecretKeys && storedSecretKeys.length"
-          class="text-[11px] text-muted"
+          class="text-2xs text-muted"
           data-testid="manifest-editor-stored"
         >
           {{
@@ -254,7 +255,7 @@ function onSave() {
             })
           }}
         </p>
-        <p class="text-[11px] text-app-warning-300/80">
+        <p class="text-2xs text-app-warning-300/80">
           {{ t('settings.providerConnection.manifestEditor.reenterSecrets') }}
         </p>
       </template>

package/app/components/settings/ProviderPreferenceEditor.vue

@@ -26,6 +26,7 @@ import {
   moveFlavor,
   subscriptionOverridesOrder,
 } from '~/components/settings/ProviderPreferenceEditor.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   /** The preset's stored order; empty/absent ⇒ the deployment's default order. */
@@ -90,9 +91,9 @@ function reset() {
 <template>
   <div>
     <div class="mb-1 flex items-start justify-between gap-3">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('settings.modelConfiguration.routeOrder.label') }}
-      </span>
+      </SectionLabel>
       <UButton
         v-if="isCustom"
         size="xs"
@@ -105,7 +106,7 @@ function reset() {
         {{ t('settings.modelConfiguration.routeOrder.reset') }}
       </UButton>
     </div>
-    <p class="mb-2 text-[11px] leading-relaxed text-dimmed">
+    <p class="mb-2 text-2xs leading-relaxed text-dimmed">
       {{
         isCustom
           ? t('settings.modelConfiguration.routeOrder.customHint')
@@ -118,7 +119,7 @@ function reset() {
          route a connected plan quietly overrules is the one thing this control must not do. -->
     <p
       v-if="subscriptionWins"
-      class="mb-2 text-[11px] leading-relaxed text-app-warning-400/90"
+      class="mb-2 text-2xs leading-relaxed text-app-warning-400/90"
       data-testid="preset-route-order-subscription-warning"
     >
       {{ t('settings.modelConfiguration.routeOrder.subscriptionOverrideHint') }}
@@ -128,7 +129,7 @@ function reset() {
          answering a different question than this order asks. -->
     <p
       v-if="badgesShowAnotherOrder"
-      class="mb-2 text-[11px] leading-relaxed text-dimmed"
+      class="mb-2 text-2xs leading-relaxed text-dimmed"
       data-testid="preset-route-order-badge-hint"
     >
       {{ t('settings.modelConfiguration.routeOrder.badgesUseDefaultPresetHint') }}
@@ -144,13 +145,13 @@ function reset() {
         :data-testid="`preset-route-${flavor}`"
       >
         <span
-          class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-elevated text-[10px] font-semibold text-muted"
+          class="flex h-5 w-5 shrink-0 items-center justify-center rounded-sm bg-elevated text-3xs font-semibold text-muted"
         >
           {{ index + 1 }}
         </span>
         <div class="min-w-0 flex-1">
           <p class="truncate text-sm text-default">{{ t(ROUTE_LABELS[flavor]) }}</p>
-          <p class="truncate text-[11px] text-dimmed">{{ t(ROUTE_HINTS[flavor]) }}</p>
+          <p class="truncate text-2xs text-dimmed">{{ t(ROUTE_HINTS[flavor]) }}</p>
         </div>
         <div class="flex shrink-0 items-center gap-1">
           <UButton

package/app/components/settings/RiskPolicyCreateForm.vue

@@ -10,6 +10,7 @@ import {
   blankRiskPolicyDraft,
   forkGatingFromDraft,
 } from '~/utils/riskPolicyDraft'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ busy: boolean }>()
 
@@ -56,14 +57,14 @@ function submit() {
 
 <template>
   <div class="rounded-lg border border-dashed border-muted p-3">
-    <p class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-muted">
+    <SectionLabel as="p" class="mb-2">
       {{ t('settings.riskPolicy.newPreset') }}
-    </p>
+    </SectionLabel>
     <div class="flex flex-wrap items-end gap-3">
       <label class="block min-w-40 flex-1">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.name') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model="draft.name"
           size="sm"
@@ -71,11 +72,12 @@ function submit() {
           data-testid="risk-policy-create-name"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.complexity') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.maxComplexity"
           type="number"
           :min="0"
@@ -84,11 +86,12 @@ function submit() {
           data-testid="risk-policy-create-complexity"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.risk') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.maxRisk"
           type="number"
           :min="0"
@@ -97,11 +100,12 @@ function submit() {
           data-testid="risk-policy-create-risk"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.impact') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.maxImpact"
           type="number"
           :min="0"
@@ -110,17 +114,25 @@ function submit() {
           data-testid="risk-policy-create-impact"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.ciFix') }}
-        </span>
-        <UInput v-model.number="draft.ciMaxAttempts" type="number" :min="0" :max="50" size="sm" />
+        </SectionLabel>
+        <UInput
+          class="w-20"
+          v-model.number="draft.ciMaxAttempts"
+          type="number"
+          :min="0"
+          :max="50"
+          size="sm"
+        />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.reqIter') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.maxRequirementIterations"
           type="number"
           :min="1"
@@ -128,11 +140,12 @@ function submit() {
           size="sm"
         />
       </label>
-      <label class="block w-20">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.companionRework') }}
-        </span>
+        </SectionLabel>
         <UInput
+          class="w-20"
           v-model.number="draft.companionMaxReworks"
           type="number"
           :min="0"
@@ -140,11 +153,12 @@ function submit() {
           size="sm"
         />
       </label>
-      <label class="block w-32">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+      <label class="block">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.create.autoPass') }}
-        </span>
+        </SectionLabel>
         <USelect
+          class="w-32"
           v-model="draft.maxRequirementConcernAllowed"
           :items="concernOptions"
           value-key="value"

package/app/components/settings/RiskPolicyEditorRow.vue

@@ -23,6 +23,7 @@ import {
 import { RISK_POLICY_AXES, RISK_POLICY_CEILING_FIELD } from '~/utils/riskPolicy'
 import MergeClassRulesEditor from '~/components/settings/MergeClassRulesEditor.vue'
 import MergeRolePolicyEditor from '~/components/settings/MergeRolePolicyEditor.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   policy: RiskPolicyLibraryEntry
@@ -156,9 +157,9 @@ const deleteBlocked = computed(
 
     <div class="grid grid-cols-1 gap-3 sm:grid-cols-4">
       <label v-for="axis in RISK_POLICY_AXES" :key="axis" class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t(CEILING_LABEL_KEYS[axis]) }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model.number="draft[RISK_POLICY_CEILING_FIELD[axis]]"
           type="number"
@@ -168,15 +169,15 @@ const deleteBlocked = computed(
         />
       </label>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.field.ciMaxAttempts') }}
-        </span>
+        </SectionLabel>
         <UInput v-model.number="draft.ciMaxAttempts" type="number" :min="0" :max="50" size="sm" />
       </label>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.field.maxRequirementIterations') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model.number="draft.maxRequirementIterations"
           type="number"
@@ -186,9 +187,9 @@ const deleteBlocked = computed(
         />
       </label>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.field.companionMaxReworks') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model.number="draft.companionMaxReworks"
           type="number"
@@ -198,9 +199,9 @@ const deleteBlocked = computed(
         />
       </label>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.field.maxRequirementConcernAllowed') }}
-        </span>
+        </SectionLabel>
         <USelect
           v-model="draft.maxRequirementConcernAllowed"
           :items="concernOptions"
@@ -245,9 +246,9 @@ const deleteBlocked = computed(
       />
       <div v-if="draft.forkEnabled" class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-4">
         <label v-for="axis in RISK_POLICY_AXES" :key="axis" class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="mb-1 block">
             {{ t(FORK_FLOOR_LABEL_KEYS[axis]) }}
-          </span>
+          </SectionLabel>
           <UInput
             v-model.number="draft[FORK_FLOOR_FIELD[axis]]"
             type="number"
@@ -257,9 +258,9 @@ const deleteBlocked = computed(
           />
         </label>
         <label class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="mb-1 block">
             {{ t('settings.riskPolicy.forkDecision.onMissingLabel') }}
-          </span>
+          </SectionLabel>
           <USelect v-model="draft.forkOnMissing" :items="onMissingOptions" size="sm" />
         </label>
       </div>
@@ -283,9 +284,9 @@ const deleteBlocked = computed(
            on an attended policy would be a control over a decision this policy never makes. It is
            not hidden as an "advanced override" — it is inert, which is a different thing. -->
       <label v-if="draft.unattended" class="mt-3 block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.riskPolicy.autoAnswer.label') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model.number="draft.minAutoAnswerConfidence"
           type="number"
@@ -294,7 +295,7 @@ const deleteBlocked = computed(
           size="sm"
           data-testid="risk-policy-auto-answer-floor"
         />
-        <span class="mt-1 block text-[11px] text-dimmed">
+        <span class="mt-1 block text-2xs text-dimmed">
           {{ t('settings.riskPolicy.autoAnswer.hint') }}
         </span>
       </label>

package/app/components/settings/RiskPolicyHealthModal.vue

@@ -64,7 +64,7 @@ const reseedableCount = computed(
               {{ t('riskPolicy.health.newHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">{{ t('riskPolicy.health.newDescription') }}</p>
+          <p class="text-2xs text-dimmed">{{ t('riskPolicy.health.newDescription') }}</p>
           <ul class="space-y-2">
             <li
               v-for="i in newPresets"
@@ -99,7 +99,7 @@ const reseedableCount = computed(
               {{ t('riskPolicy.health.updatesHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('riskPolicy.health.updatesDescription') }}
           </p>
           <ul class="space-y-2">
@@ -110,7 +110,7 @@ const reseedableCount = computed(
             >
               <div class="min-w-0">
                 <span class="truncate text-sm font-medium text-app-100">{{ i.name }}</span>
-                <p class="text-[11px] text-app-warning-400/80">
+                <p class="text-2xs text-app-warning-400/80">
                   {{
                     t('riskPolicy.health.versionAvailable', {
                       from: i.fromVersion ?? 0,

package/app/components/settings/RiskPolicyPanel.vue

@@ -13,6 +13,7 @@ import { riskPolicyCopyName } from '~/utils/riskPolicy'
 import RiskPolicyCreateForm from '~/components/settings/RiskPolicyCreateForm.vue'
 import RiskPolicyEditorRow from '~/components/settings/RiskPolicyEditorRow.vue'
 import RiskPolicyInheritedRow from '~/components/settings/RiskPolicyInheritedRow.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 
@@ -179,10 +180,10 @@ function unhide(presetId: string) {
     <!-- Inherited FIRST: they are the org's posture, and a board reading its own list wants to see
          what it is working from before what it has changed. -->
     <section v-if="inherited.length > 0" class="space-y-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{ t('settings.riskPolicy.inherited.heading') }}
-      </p>
-      <p class="text-[11px] text-dimmed">{{ t('settings.riskPolicy.inherited.hint') }}</p>
+      </SectionLabel>
+      <p class="text-2xs text-dimmed">{{ t('settings.riskPolicy.inherited.hint') }}</p>
       <RiskPolicyInheritedRow
         v-for="policy in inherited"
         :key="policy.id"
@@ -194,12 +195,9 @@ function unhide(presetId: string) {
     </section>
 
     <section class="space-y-4">
-      <p
-        v-if="inherited.length > 0"
-        class="text-[11px] font-semibold uppercase tracking-wide text-muted"
-      >
+      <SectionLabel v-if="inherited.length > 0" as="p">
         {{ t('settings.riskPolicy.own.heading') }}
-      </p>
+      </SectionLabel>
       <RiskPolicyEditorRow
         v-for="policy in own"
         :key="policy.id"
@@ -217,10 +215,10 @@ function unhide(presetId: string) {
          whether it still shadows an account policy: one whose policy the account has since withdrawn
          withholds nothing, and reading it as a live opt-out would misstate what the board is doing. -->
     <section v-if="store.suppressions.length > 0 || suppressionsFailed" class="space-y-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{ t('settings.riskPolicy.hidden.heading') }}
-      </p>
-      <p v-if="suppressionsFailed" class="text-[11px] text-app-warning-400">
+      </SectionLabel>
+      <p v-if="suppressionsFailed" class="text-2xs text-app-warning-400">
         {{ t('settings.riskPolicy.hidden.loadFailed') }}
       </p>
       <div
@@ -230,8 +228,8 @@ function unhide(presetId: string) {
         data-testid="risk-policy-hidden-row"
         :data-policy-id="entry.id"
       >
-        <span class="flex-1 truncate text-[12px] text-toned">{{ entry.name }}</span>
-        <span v-if="!entry.inherited" class="text-[11px] text-dimmed">
+        <span class="flex-1 truncate text-xs text-toned">{{ entry.name }}</span>
+        <span v-if="!entry.inherited" class="text-2xs text-dimmed">
           {{ t('settings.riskPolicy.hidden.withdrawn') }}
         </span>
         <UButton

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -7,6 +7,7 @@
 // serviceFragmentDefaults store (the backend replaces the whole list on each change).
 import { onMounted, ref } from 'vue'
 import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const fragments = useFragmentsStore()
@@ -59,9 +60,9 @@ function remove(id: string) {
     </p>
 
     <div class="flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('settings.serviceFragmentDefaults.defaultFragments') }}
-      </span>
+      </SectionLabel>
       <UDropdownMenu v-if="menu.length" :items="menu" :ui="{ content: 'max-h-72 overflow-y-auto' }">
         <UButton
           size="xs"
@@ -90,11 +91,11 @@ function remove(id: string) {
         {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ t('settings.serviceFragmentDefaults.empty') }}
     </p>
 
-    <div class="flex flex-wrap gap-x-4 gap-y-1 border-t border-default pt-3 text-[11px]">
+    <div class="flex flex-wrap gap-x-4 gap-y-1 border-t border-default pt-3 text-2xs">
       <span class="text-dimmed">
         {{ t('settings.serviceFragmentDefaults.footer.question') }}
       </span>

package/app/components/settings/SharedStacksPanel.vue

@@ -288,7 +288,7 @@ async function remove(stack: SharedStack) {
                 {{ statusLabel(stack.status) }}
               </UBadge>
             </div>
-            <p class="truncate text-[11px] text-dimmed">{{ stack.cloneUrl }}</p>
+            <p class="truncate text-2xs text-dimmed">{{ stack.cloneUrl }}</p>
             <div v-if="stack.managedNetworks.length" class="flex flex-wrap gap-1">
               <UBadge
                 v-for="net in stack.managedNetworks"
@@ -347,7 +347,7 @@ async function remove(stack: SharedStack) {
             />
           </div>
         </div>
-        <p v-if="stack.lastError" class="text-[11px] text-app-error-400">{{ stack.lastError }}</p>
+        <p v-if="stack.lastError" class="text-2xs text-app-error-400">{{ stack.lastError }}</p>
       </div>
     </section>
 
@@ -407,12 +407,12 @@ async function remove(stack: SharedStack) {
         >
           {{ t('settings.sharedStacks.detect.button') }}
         </UButton>
-        <span class="text-[11px] text-dimmed">{{ t('settings.sharedStacks.detect.hint') }}</span>
+        <span class="text-2xs text-dimmed">{{ t('settings.sharedStacks.detect.hint') }}</span>
       </div>
 
       <p
         v-if="detectedEnvFiles.length"
-        class="text-[11px] text-dimmed"
+        class="text-2xs text-dimmed"
         data-testid="shared-stack-env-files"
       >
         {{ t('settings.sharedStacks.detect.envFiles') }}
@@ -428,7 +428,7 @@ async function remove(stack: SharedStack) {
           <li
             v-for="(label, index) in layerLabels"
             :key="index"
-            class="font-mono text-[11px] text-dimmed"
+            class="font-mono text-2xs text-dimmed"
           >
             {{ label }}
           </li>

package/app/components/settings/TaskSourceCard.vue

@@ -95,7 +95,7 @@ const STATUS_UI: Record<
         <UIcon :name="state.icon" class="h-5 w-5 shrink-0 text-toned" />
         <div class="min-w-0">
           <div class="text-sm font-medium text-default">{{ state.label }}</div>
-          <div class="text-[11px] text-dimmed">{{ subtitle }}</div>
+          <div class="text-2xs text-dimmed">{{ subtitle }}</div>
         </div>
       </div>
       <div class="flex shrink-0 items-center gap-2">
@@ -139,7 +139,7 @@ const STATUS_UI: Record<
       variant="subtle"
       :icon="STATUS_UI[diagnostic.status].icon"
       :description="diagnostic.message + (diagnostic.detail ? ` ${diagnostic.detail}` : '')"
-      :ui="{ description: 'text-[11px]' }"
+      :ui="{ description: 'text-2xs' }"
     />
   </div>
 </template>

package/app/components/settings/TaskTypeSuppressionsPanel.vue

@@ -65,17 +65,17 @@ async function toggle(row: TaskTypeSuppression, offered: boolean) {
       {{ t('settings.taskTypeSuppressions.intro') }}
     </p>
 
-    <p v-if="loading" class="text-[11px] text-dimmed">
+    <p v-if="loading" class="text-2xs text-dimmed">
       {{ t('settings.taskTypeSuppressions.loading') }}
     </p>
-    <p v-else-if="!rows.length" class="text-[11px] text-dimmed">
+    <p v-else-if="!rows.length" class="text-2xs text-dimmed">
       {{ t('settings.taskTypeSuppressions.empty') }}
     </p>
     <ul v-else class="space-y-2" data-testid="task-type-suppressions">
       <li
         v-for="row in rows"
         :key="row.taskType.taskType"
-        class="flex items-start justify-between gap-3 rounded border border-default px-3 py-2"
+        class="flex items-start justify-between gap-3 rounded-sm border border-default px-3 py-2"
         data-testid="task-type-suppression"
         :data-task-type="row.taskType.taskType"
       >
@@ -94,7 +94,7 @@ async function toggle(row: TaskTypeSuppression, offered: boolean) {
               {{ row.taskType.presentation.category }}
             </UBadge>
           </div>
-          <p class="mt-0.5 text-[11px] text-dimmed">
+          <p class="mt-0.5 text-2xs text-dimmed">
             {{ row.taskType.presentation.description }}
           </p>
         </div>