@cat-factory/app 0.308.0 → 0.309.0

package/app/components/panels/inspector/ServiceSelfTests.vue

@@ -188,17 +188,17 @@ async function stop(mode: EnvironmentTestMode) {
   <div class="mt-3 space-y-3 border-t border-default pt-3" data-testid="env-test-section">
     <!-- The precondition both self-tests share, stated once at the top: with no provision type
          there is no environment to stand up and therefore nothing for an agent to drive either. -->
-    <p v-if="!canTest" class="text-[11px] text-dimmed">
+    <p v-if="!canTest" class="text-2xs text-dimmed">
       {{ t('inspector.testConfig.envTest.infraless') }}
     </p>
 
     <!-- 1. The provisioning self-test: the whole lifecycle against a throwaway branch. -->
     <div class="flex items-center justify-between gap-2">
       <div class="min-w-0">
-        <p class="text-[11px] font-medium text-toned">
+        <p class="text-2xs font-medium text-toned">
           {{ t('inspector.testConfig.envTest.title') }}
         </p>
-        <p class="text-[11px] text-muted">{{ t('inspector.testConfig.envTest.hint') }}</p>
+        <p class="text-2xs text-muted">{{ t('inspector.testConfig.envTest.hint') }}</p>
       </div>
       <UButton
         v-if="!isRunning('provision')"
@@ -228,7 +228,7 @@ async function stop(mode: EnvironmentTestMode) {
 
     <p
       v-if="provisionRun"
-      class="text-[11px]"
+      class="text-2xs"
       :class="{
         'text-app-info-300/80': provisionRun.status === 'running',
         'text-app-success-300/80': provisionRun.status === 'succeeded',
@@ -253,11 +253,7 @@ async function stop(mode: EnvironmentTestMode) {
       </template>
     </p>
 
-    <div
-      v-if="errors.provision"
-      class="text-[11px] text-app-error-400"
-      data-testid="env-test-error"
-    >
+    <div v-if="errors.provision" class="text-2xs text-app-error-400" data-testid="env-test-error">
       <p>{{ errors.provision.text }}</p>
       <!-- Only the not-provisionable handler case is one-click fixable: jump to Infrastructure →
            Test environments, where the workspace's per-type environment handler is registered. -->
@@ -279,10 +275,10 @@ async function stop(mode: EnvironmentTestMode) {
          and could not do with the environment it was handed. -->
     <div class="flex items-center justify-between gap-2 border-t border-default pt-3">
       <div class="min-w-0">
-        <p class="text-[11px] font-medium text-toned">
+        <p class="text-2xs font-medium text-toned">
           {{ t('inspector.testConfig.envProbe.title') }}
         </p>
-        <p class="text-[11px] text-muted">
+        <p class="text-2xs text-muted">
           {{ t('inspector.testConfig.envProbe.hint') }}
           {{
             probeSurface === 'ui'
@@ -319,7 +315,7 @@ async function stop(mode: EnvironmentTestMode) {
 
     <p
       v-if="probeRun"
-      class="text-[11px]"
+      class="text-2xs"
       :class="{
         'text-app-info-300/80': probeRun.status === 'running',
         'text-app-success-300/80': probeRun.status === 'succeeded',
@@ -355,7 +351,7 @@ async function stop(mode: EnvironmentTestMode) {
 
     <div
       v-if="errors['agent-probe']"
-      class="text-[11px] text-app-error-400"
+      class="text-2xs text-app-error-400"
       data-testid="env-probe-error"
     >
       <p>{{ errors['agent-probe']!.text }}</p>

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -429,7 +429,7 @@ function setSize(value: InstanceSize) {
     :default-open="props.defaultOpen"
   >
     <div class="space-y-1">
-      <span class="text-[11px] text-muted">{{ t('inspector.testConfig.provisionType') }}</span>
+      <span class="text-2xs text-muted">{{ t('inspector.testConfig.provisionType') }}</span>
       <div class="flex flex-wrap gap-1">
         <UButton
           v-for="p in PROVISION_TYPES"
@@ -442,7 +442,7 @@ function setSize(value: InstanceSize) {
           {{ p.label }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-dimmed">
+      <p class="text-2xs leading-snug text-dimmed">
         {{ t('inspector.testConfig.provisionTypeHint') }}
       </p>
     </div>
@@ -452,14 +452,14 @@ function setSize(value: InstanceSize) {
          provisions the compose stack, rather than editing the raw path inline. -->
     <div
       v-if="provisionType === 'docker-compose'"
-      class="flex items-center justify-between gap-2 rounded border border-primary/40 bg-primary/10 p-2"
+      class="flex items-center justify-between gap-2 rounded-sm border border-primary/40 bg-primary/10 p-2"
       data-testid="env-setup-nudge"
     >
       <div class="min-w-0">
-        <p class="text-[11px] font-medium text-primary/90">
+        <p class="text-2xs font-medium text-primary/90">
           {{ t('inspector.testConfig.envWizard.title') }}
         </p>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.envWizard.hint') }}
         </p>
       </div>
@@ -477,9 +477,9 @@ function setSize(value: InstanceSize) {
 
     <!-- Auto-detect a recommended provisioning config from the repo (slice 11). Non-binding:
          it prefills the form below + the kube edit refs; the user confirms/edits everything. -->
-    <div v-if="repoContext" class="space-y-2 rounded border border-default bg-default/40 p-2">
+    <div v-if="repoContext" class="space-y-2 rounded-sm border border-default bg-default/40 p-2">
       <div class="flex items-center justify-between gap-2">
-        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.detect.title') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.detect.title') }}</span>
         <UButton
           size="xs"
           variant="soft"
@@ -491,23 +491,23 @@ function setSize(value: InstanceSize) {
           {{ t('inspector.testConfig.detect.button') }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-dimmed">
+      <p class="text-2xs leading-snug text-dimmed">
         {{ t('inspector.testConfig.detect.hint') }}
       </p>
 
-      <p v-if="detectError" class="text-[11px] text-app-error-300/80">
+      <p v-if="detectError" class="text-2xs text-app-error-300/80">
         {{ detectError }}
       </p>
 
       <template v-if="detectResult && !detecting">
         <p
           v-if="!detectResult.detected && detectResult.provisioning.type !== 'custom'"
-          class="text-[11px] text-app-warning-300/80"
+          class="text-2xs text-app-warning-300/80"
         >
           {{ t('inspector.testConfig.detect.none') }}
         </p>
         <template v-else>
-          <p class="text-[11px] text-app-success-300/80">
+          <p class="text-2xs text-app-success-300/80">
             {{
               t('inspector.testConfig.detect.applied', {
                 type: provisionTypeLabel(detectResult.provisioning.type),
@@ -516,7 +516,7 @@ function setSize(value: InstanceSize) {
           </p>
 
           <div v-if="detectResult.serviceDirCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-muted">{{
+            <span class="text-2xs text-muted">{{
               t('inspector.testConfig.detect.serviceDirTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -534,7 +534,7 @@ function setSize(value: InstanceSize) {
           </div>
 
           <div v-if="detectResult.manifestRootCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-muted">{{
+            <span class="text-2xs text-muted">{{
               t('inspector.testConfig.detect.manifestRootTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -552,7 +552,7 @@ function setSize(value: InstanceSize) {
           </div>
 
           <div v-if="detectResult.overlayCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-muted">{{
+            <span class="text-2xs text-muted">{{
               t('inspector.testConfig.detect.overlayTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -570,7 +570,7 @@ function setSize(value: InstanceSize) {
           </div>
 
           <div v-if="detectResult.composeServiceCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-muted">{{
+            <span class="text-2xs text-muted">{{
               t('inspector.testConfig.detect.composeServiceTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -587,12 +587,12 @@ function setSize(value: InstanceSize) {
             </div>
           </div>
 
-          <p v-if="detectResult.urlSource" class="text-[11px] text-dimmed">
+          <p v-if="detectResult.urlSource" class="text-2xs text-dimmed">
             {{
               t('inspector.testConfig.detect.urlSource', { source: detectResult.urlSource.source })
             }}
           </p>
-          <p v-if="detectResult.namespace" class="text-[11px] text-dimmed">
+          <p v-if="detectResult.namespace" class="text-2xs text-dimmed">
             {{ t('inspector.testConfig.detect.namespace', { namespace: detectResult.namespace }) }}
           </p>
 
@@ -600,7 +600,7 @@ function setSize(value: InstanceSize) {
             <li
               v-for="(n, i) in detectResult.notes"
               :key="i"
-              class="flex items-start gap-1.5 text-[11px] leading-snug text-dimmed"
+              class="flex items-start gap-1.5 text-2xs leading-snug text-dimmed"
             >
               <span
                 :class="
@@ -622,7 +622,7 @@ function setSize(value: InstanceSize) {
 
     <div v-if="provisionType === 'docker-compose'" class="space-y-2">
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.composePath') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.composePath') }}</label>
         <div class="flex items-center gap-1">
           <UInput
             :model-value="composePath"
@@ -644,7 +644,7 @@ function setSize(value: InstanceSize) {
             @click="openBrowse('compose')"
           />
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.composeHint') }}
         </p>
       </div>
@@ -660,9 +660,7 @@ function setSize(value: InstanceSize) {
          connection (the "how") is configured per-type in the Infrastructure window. -->
     <div v-if="provisionType === 'kubernetes'" class="space-y-2">
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{
-          t('inspector.testConfig.manifestSourceLabel')
-        }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.manifestSourceLabel') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             :color="kubeSourceType === 'colocated' ? 'primary' : 'neutral'"
@@ -684,7 +682,7 @@ function setSize(value: InstanceSize) {
       </div>
 
       <div v-if="kubeSourceType === 'separate'" class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.manifestRepo') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.manifestRepo') }}</label>
         <UInput
           :model-value="kubeRepo"
           size="xs"
@@ -695,7 +693,7 @@ function setSize(value: InstanceSize) {
         />
       </div>
       <div v-if="kubeSourceType === 'separate'" class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.manifestRef') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.manifestRef') }}</label>
         <UInput
           :model-value="kubeRef"
           size="xs"
@@ -707,7 +705,7 @@ function setSize(value: InstanceSize) {
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.manifestPath') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.manifestPath') }}</label>
         <div class="flex items-center gap-1">
           <UInput
             :model-value="kubePath"
@@ -727,13 +725,13 @@ function setSize(value: InstanceSize) {
             @click="openBrowse('k8s')"
           />
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.manifestPathHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.rendererLabel') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.rendererLabel') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="r in RENDERERS"
@@ -746,7 +744,7 @@ function setSize(value: InstanceSize) {
             {{ r.label }}
           </UButton>
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.rendererHint') }}
         </p>
       </div>
@@ -756,7 +754,7 @@ function setSize(value: InstanceSize) {
          source), the per-PR recipe lives in the target repository's own preview workflow, so
          declaring the type IS the whole service-side configuration. Say so explicitly rather
          than rendering an empty panel that reads like something failed to load. -->
-    <p v-if="provisionType === 'cloudflare'" class="text-[11px] text-dimmed">
+    <p v-if="provisionType === 'cloudflare'" class="text-2xs text-dimmed">
       {{ t('inspector.testConfig.cloudflareHint') }}
     </p>
 
@@ -764,9 +762,7 @@ function setSize(value: InstanceSize) {
          handler the workspace configures). -->
     <div v-if="provisionType === 'custom'" class="space-y-2">
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
-          t('inspector.testConfig.customManifestId')
-        }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.customManifestId') }}</label>
         <USelect
           v-if="customTypeItems.length"
           :model-value="customManifestId"
@@ -776,15 +772,15 @@ function setSize(value: InstanceSize) {
           :placeholder="t('inspector.testConfig.customManifestIdPlaceholder')"
           @update:model-value="(v: string) => setCustomManifestId(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>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.customManifestIdHint') }}
         </p>
       </div>
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('inspector.testConfig.customManifestPath')
         }}</label>
         <UInput
@@ -796,7 +792,7 @@ function setSize(value: InstanceSize) {
             (e: KeyboardEvent) => setCustomManifestPath((e.target as HTMLInputElement).value)
           "
         />
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.customManifestPathHint') }}
         </p>
       </div>
@@ -805,10 +801,10 @@ function setSize(value: InstanceSize) {
            shown when the selected type declares a fixer prompt. -->
       <div
         v-if="manifestFixerAvailable && repoContext"
-        class="space-y-1.5 rounded border border-default bg-default/40 p-2"
+        class="space-y-1.5 rounded-sm border border-default bg-default/40 p-2"
       >
         <div class="flex items-center justify-between gap-2">
-          <span class="text-[11px] text-muted">{{
+          <span class="text-2xs text-muted">{{
             t('inspector.testConfig.generateManifest.title')
           }}</span>
           <UButton
@@ -823,15 +819,15 @@ function setSize(value: InstanceSize) {
             {{ t('inspector.testConfig.generateManifest.button') }}
           </UButton>
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.generateManifest.hint') }}
         </p>
-        <p v-if="manifestRepairError" class="text-[11px] text-app-error-300/80">
+        <p v-if="manifestRepairError" class="text-2xs text-app-error-300/80">
           {{ t('inspector.testConfig.generateManifest.error') }}
         </p>
         <p
           v-else-if="manifestRepairJob"
-          class="text-[11px]"
+          class="text-2xs"
           :class="{
             'text-app-info-300/80': manifestRepairJob.status === 'running',
             'text-app-success-300/80': manifestRepairJob.status === 'succeeded',
@@ -840,7 +836,7 @@ function setSize(value: InstanceSize) {
         >
           {{ t(`inspector.testConfig.generateManifest.status.${manifestRepairJob.status}`) }}
         </p>
-        <p v-else-if="manifestRepairJobId" class="text-[11px] text-app-info-300/80">
+        <p v-else-if="manifestRepairJobId" class="text-2xs text-app-info-300/80">
           {{ t('inspector.testConfig.generateManifest.dispatched') }}
         </p>
       </div>
@@ -896,7 +892,7 @@ function setSize(value: InstanceSize) {
       :hint="t('inspector.testConfig.provisioningHint')"
     >
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.cloudProvider') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.cloudProvider') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="p in PROVIDERS"
@@ -912,7 +908,7 @@ function setSize(value: InstanceSize) {
       </div>
 
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.instanceSize') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.instanceSize') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="s in SIZES"

package/app/components/panels/inspector/ServiceTestSecrets.vue

@@ -165,13 +165,13 @@ async function clearAll() {
 
     <!-- These are REAL secrets: an unmistakable sensitivity + replace-all warning. -->
     <div
-      class="flex items-start gap-2 rounded-md border border-app-warning-500/40 bg-app-warning-500/10 px-2.5 py-2 text-[11px] leading-snug text-app-warning-200"
+      class="flex items-start gap-2 rounded-md border border-app-warning-500/40 bg-app-warning-500/10 px-2.5 py-2 text-2xs leading-snug text-app-warning-200"
     >
       <UIcon name="i-lucide-shield-alert" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400" />
       <span>{{ t('inspector.testSecrets.warning') }}</span>
     </div>
 
-    <p class="text-[11px] leading-snug text-dimmed">
+    <p class="text-2xs leading-snug text-dimmed">
       {{ t('inspector.testSecrets.replaceNote') }}
     </p>
 
@@ -234,7 +234,7 @@ async function clearAll() {
         </UFormField>
       </div>
 
-      <p v-if="duplicateKeys.size" class="text-[11px] text-app-error-400">
+      <p v-if="duplicateKeys.size" class="text-2xs text-app-error-400">
         {{ t('inspector.testSecrets.duplicateKey') }}
       </p>
 

package/app/components/panels/inspector/ServiceTestingContext.vue

@@ -89,7 +89,7 @@ function revert() {
   >
     <!-- This text reaches the model in the prompt, so it must never hold a real secret. -->
     <div
-      class="flex items-start gap-2 rounded-md border border-muted bg-elevated/40 px-2.5 py-2 text-[11px] leading-snug text-toned"
+      class="flex items-start gap-2 rounded-md border border-muted bg-elevated/40 px-2.5 py-2 text-2xs leading-snug text-toned"
     >
       <UIcon name="i-lucide-info" class="mt-0.5 h-4 w-4 shrink-0 text-muted" />
       <span>{{ t('inspector.testingContext.notSecret') }}</span>
@@ -104,7 +104,7 @@ function revert() {
     />
 
     <div class="flex items-center justify-between gap-2">
-      <p class="text-[11px] text-dimmed" :class="{ 'text-app-error-400': tooLong }">
+      <p class="text-2xs text-dimmed" :class="{ 'text-app-error-400': tooLong }">
         {{
           t('inspector.testingContext.length', {
             count: outgoing.length,

package/app/components/panels/inspector/ServiceValidationConfig.vue

@@ -234,7 +234,7 @@ async function clear() {
         />
       </UFormField>
 
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         {{ t('inspector.validationChecks.hint') }}
       </p>
 
@@ -273,7 +273,7 @@ async function clear() {
         />
       </div>
 
-      <p v-if="rows.length === 0" class="text-[11px] text-dimmed" data-testid="validation-empty">
+      <p v-if="rows.length === 0" class="text-2xs text-dimmed" data-testid="validation-empty">
         {{ t('inspector.validationChecks.empty') }}
       </p>
 

package/app/components/panels/inspector/TaskAgentConfig.vue

@@ -58,7 +58,7 @@ function setValue(id: string, value: string) {
   >
     <div v-for="d in descriptors" :key="d.id" class="space-y-1">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] text-muted">{{ d.label }}</span>
+        <span class="text-2xs text-muted">{{ d.label }}</span>
         <div class="flex items-center gap-1.5">
           <UIcon
             v-if="isFrozen(d.agentKind)"
@@ -81,7 +81,7 @@ function setValue(id: string, value: string) {
           {{ opt.label }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-dimmed">{{ d.description }}</p>
+      <p class="text-2xs leading-snug text-dimmed">{{ d.description }}</p>
     </div>
   </InspectorSection>
 </template>

package/app/components/panels/inspector/TaskAprioriBranches.vue

@@ -15,6 +15,7 @@
 // mint the user's branch name across every involved repo).
 import { aprioriWorkingBranch } from '@cat-factory/contracts'
 import type { AprioriBranch, Block } from '~/types/domain'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -150,9 +151,9 @@ function removeDisabled(entry: AprioriBranch): boolean {
 <template>
   <div v-if="repo" data-testid="apriori-branches">
     <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('inspector.aprioriBranches.title') }}
-      </span>
+      </SectionLabel>
     </div>
 
     <!-- Attached branches: one row each — name, mode badge + toggle, remove. -->
@@ -220,14 +221,14 @@ function removeDisabled(entry: AprioriBranch): boolean {
       class="w-full"
       data-testid="apriori-branch-search"
     />
-    <div v-else class="text-[11px] text-dimmed">
+    <div v-else class="text-2xs text-dimmed">
       {{ t('inspector.aprioriBranches.connectFirst') }}
     </div>
 
     <!-- A protected branch pushed to by the run is likely to be rejected — warn, don't block. -->
     <div
       v-if="workingName && isProtected(workingName)"
-      class="mt-1.5 flex items-start gap-1.5 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-[11px] text-app-warning-200/90"
+      class="mt-1.5 flex items-start gap-1.5 rounded-md border border-app-warning-500/40 bg-app-warning-950/40 p-2 text-2xs text-app-warning-200/90"
       data-testid="apriori-branch-protected-warning"
     >
       <UIcon
@@ -237,7 +238,7 @@ function removeDisabled(entry: AprioriBranch): boolean {
       <span>{{ t('inspector.aprioriBranches.protectedWarning', { branch: workingName }) }}</span>
     </div>
 
-    <div class="mt-1 text-[11px] text-dimmed">
+    <div class="mt-1 text-2xs text-dimmed">
       {{ t('inspector.aprioriBranches.hint') }}
       <template v-if="isMultiRepo">
         {{ t('inspector.aprioriBranches.multiRepoHint') }}

package/app/components/panels/inspector/TaskDependencies.vue

@@ -86,7 +86,7 @@ async function removeDep(dep: Block) {
       icon="i-lucide-git-branch"
       :title="t('inspector.dependencies.empty')"
     />
-    <div v-if="!runnable" class="text-[10px] text-app-warning-400">
+    <div v-if="!runnable" class="text-3xs text-app-warning-400">
       {{ t('inspector.dependencies.blocked') }}
     </div>
   </InspectorSection>

package/app/components/panels/inspector/TaskEstimateBadge.vue

@@ -79,12 +79,8 @@ function barClass(n: number): string {
     default-open
   >
     <div class="space-y-1.5 rounded-lg border border-default bg-default/40 p-2.5">
-      <p class="text-[11px] text-dimmed" data-testid="task-estimate-basis">{{ basisLabel }}</p>
-      <p
-        v-if="supersededLabel"
-        class="text-[11px] text-dimmed"
-        data-testid="task-estimate-superseded"
-      >
+      <p class="text-2xs text-dimmed" data-testid="task-estimate-basis">{{ basisLabel }}</p>
+      <p v-if="supersededLabel" class="text-2xs text-dimmed" data-testid="task-estimate-superseded">
         {{ supersededLabel }}
       </p>
       <div v-for="axis in AXES" :key="axis.key" class="flex items-center gap-2">
@@ -98,7 +94,7 @@ function barClass(n: number): string {
         </div>
         <span
           v-if="axis.was"
-          class="shrink-0 text-[11px] tabular-nums text-dimmed"
+          class="shrink-0 text-2xs tabular-nums text-dimmed"
           :data-testid="`task-estimate-was-${axis.key}`"
           >{{ t('inspector.estimate.was', { value: axis.was }) }}</span
         >