@cat-factory/app 0.307.1 → 0.309.0

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -12,6 +12,7 @@ import CopyButton from '~/components/common/CopyButton.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import { agentKindMeta } from '~/utils/catalog'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t, n } = useI18n()
 
@@ -165,12 +166,12 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
         <!-- synthesized result -->
         <section v-if="session.synthesis" class="mb-6">
           <div class="mb-2 flex items-center gap-2">
-            <h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('consensus.synthesizedResult') }}
-            </h3>
+            </SectionLabel>
             <span
               v-if="session.confidence != null"
-              class="rounded bg-app-success-500/15 px-1.5 py-0.5 text-xs text-app-success-300"
+              class="rounded-sm bg-app-success-500/15 px-1.5 py-0.5 text-xs text-app-success-300"
               >{{ t('consensus.confidence', { pct: pct(session.confidence) }) }}</span
             >
             <CopyButton :text="session.synthesis" class="ms-auto -my-1" />
@@ -193,9 +194,9 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
 
         <!-- participants -->
         <section class="mb-6">
-          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('consensus.panel') }}
-          </h3>
+          </SectionLabel>
           <div class="flex flex-wrap gap-2">
             <div
               v-for="(p, i) in session.participants"
@@ -215,10 +216,10 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
 
         <!-- rounds -->
         <section v-for="round in session.rounds" :key="round.index" class="mb-5">
-          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('consensus.round.heading', { n: round.index + 1 }) }} ·
             {{ roundLabel(round.kind) }}
-          </h3>
+          </SectionLabel>
           <div class="space-y-3">
             <div
               v-for="c in round.contributions"
@@ -232,7 +233,7 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
                 <span class="text-xs text-dimmed">{{ roleFor(c.participantId) }}</span>
                 <span
                   v-if="topScore(c)"
-                  class="ms-auto rounded bg-elevated px-1.5 py-0.5 text-xs text-toned"
+                  class="ms-auto rounded-sm bg-elevated px-1.5 py-0.5 text-xs text-toned"
                   >{{
                     t('consensus.topScore', {
                       label: topScore(c)!.label,
@@ -247,7 +248,7 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
                 <span
                   v-for="s in c.scores"
                   :key="s.dimension"
-                  class="rounded bg-elevated/80 px-1.5 py-0.5 text-xs text-muted"
+                  class="rounded-sm bg-elevated/80 px-1.5 py-0.5 text-xs text-muted"
                   >{{ s.dimension }}: {{ pct(s.value) }}</span
                 >
               </div>

package/app/components/context/ContextAttachmentFields.vue

@@ -21,6 +21,7 @@ import { claimCandidates, firstLinkCandidate } from '~/components/context/pasted
 import { connectableSources } from '~/utils/sourcePicker'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   /** The staged attachments; the host owns the array and commits it after creating the block. */
@@ -188,9 +189,9 @@ function removePending(item: PendingContext) {
     <!-- Context documents (ungated; Attach disabled until a source is connected). -->
     <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('contextAttachments.documents') }}
-        </span>
+        </SectionLabel>
         <UButton
           v-if="docsConnected"
           color="neutral"
@@ -298,14 +299,14 @@ function removePending(item: PendingContext) {
           </div>
           <p
             v-if="item.unreadable"
-            class="px-2 pb-1.5 text-[11px] text-app-warning-400"
+            class="px-2 pb-1.5 text-2xs text-app-warning-400"
             data-testid="context-item-unreadable"
           >
             {{ t('contextAttachments.unreadable', { error: item.unreadable }) }}
           </p>
         </div>
       </div>
-      <p v-else class="text-[11px] text-dimmed">
+      <p v-else class="text-2xs text-dimmed">
         {{ docsHint }}
       </p>
     </div>
@@ -313,9 +314,9 @@ function removePending(item: PendingContext) {
     <!-- Context issues (ungated; Attach disabled until a tracker is connected). -->
     <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('contextAttachments.issues') }}
-        </span>
+        </SectionLabel>
         <UButton
           v-if="issuesConnected"
           color="neutral"
@@ -409,14 +410,14 @@ function removePending(item: PendingContext) {
                again on submit, and a failure now blocks the create. -->
           <p
             v-if="item.unreadable"
-            class="px-2 pb-1.5 text-[11px] text-app-warning-400"
+            class="px-2 pb-1.5 text-2xs text-app-warning-400"
             data-testid="context-item-unreadable"
           >
             {{ t('contextAttachments.unreadable', { error: item.unreadable }) }}
           </p>
         </div>
       </div>
-      <p v-else class="text-[11px] text-dimmed">
+      <p v-else class="text-2xs text-dimmed">
         {{ issuesHint }}
       </p>
     </div>

package/app/components/docs/DocInterviewWindow.vue

@@ -24,6 +24,7 @@ import {
   interviewGatePhase,
   interviewStepReached,
 } from '~/utils/interviewGate'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const docInterview = useDocInterviewStore()
@@ -131,7 +132,7 @@ const onProceed = () =>
       </div>
 
       <template v-else>
-        <p class="mb-4 text-[13px] leading-relaxed text-toned">
+        <p class="mb-4 text-sm leading-relaxed text-toned">
           {{ t('docInterview.intro') }}
         </p>
 
@@ -171,20 +172,20 @@ const onProceed = () =>
           class="rounded-lg border border-default bg-app-950/40 p-4"
           data-testid="doc-interview-converged"
         >
-          <p class="mb-2 text-[11px] font-medium uppercase tracking-wide text-dimmed">
+          <SectionLabel as="p" class="mb-2">
             {{ t('docInterview.brief') }}
-          </p>
+          </SectionLabel>
           <pre
             v-if="session.brief"
-            class="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-toned"
+            class="whitespace-pre-wrap break-words text-sm leading-relaxed text-toned"
             >{{ session.brief }}</pre>
-          <p v-else class="text-[13px] text-muted">{{ t('docInterview.converged') }}</p>
+          <p v-else class="text-sm text-muted">{{ t('docInterview.converged') }}</p>
         </div>
 
         <!-- No pending questions but not yet converged -->
         <div
           v-else-if="questions.length === 0"
-          class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-[13px] text-muted"
+          class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-sm text-muted"
         >
           {{ t('docInterview.converged') }}
         </div>
@@ -197,7 +198,7 @@ const onProceed = () =>
             class="rounded-lg border border-default bg-app-950/40 p-3"
             data-testid="doc-interview-question"
           >
-            <p class="mb-2 text-[13px] font-medium text-default">{{ q.question }}</p>
+            <p class="mb-2 text-sm font-medium text-default">{{ q.question }}</p>
             <UTextarea
               v-model="drafts[q.key]"
               :rows="2"
@@ -212,7 +213,7 @@ const onProceed = () =>
                  for an answer to go. Saying so beats taking text the flush could only drop. -->
             <p
               v-if="!addressable(q)"
-              class="mt-1 text-[11px] text-app-warning-300"
+              class="mt-1 text-2xs text-app-warning-300"
               data-testid="doc-interview-unanswerable"
             >
               {{ t('docInterview.unanswerable') }}
@@ -228,7 +229,7 @@ const onProceed = () =>
       v-if="session && phase === 'awaiting' && questions.length > 0"
       class="flex items-center justify-between gap-3 border-t border-default px-5 py-3"
     >
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         <span
           v-if="unanswered > 0"
           class="text-app-warning-400/90"

package/app/components/documents/ContextDocumentPicker.vue

@@ -49,6 +49,7 @@ import {
   reconcileSource,
   sourceMenuItems,
 } from '~/utils/sourcePicker'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Repo-backed document sources pick a FILE out of a repository (repo search → file
 // search / tree browse) instead of the generic free-text catalogue search. Today only
@@ -420,12 +421,9 @@ onMounted(() => {
          here (each opens the connect modal over the caller's form). Rendered as plain text when
          there is nothing to decide, which for a member is the usual case. -->
     <div class="flex items-center gap-1.5">
-      <span
-        :id="sourceLabelId"
-        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
-      >
+      <SectionLabel as="span" :id="sourceLabelId" class="shrink-0">
         {{ t('documents.picker.sourceLabel') }}
-      </span>
+      </SectionLabel>
       <UDropdownMenu
         v-if="sourcePickable"
         :items="sourceMenu"
@@ -490,7 +488,7 @@ onMounted(() => {
         @keydown.enter="refRow && pickRef(refRow)"
       />
 
-      <p v-if="searchError" class="px-1 text-[11px] text-app-warning-400">
+      <p v-if="searchError" class="px-1 text-2xs text-app-warning-400">
         {{ t('documents.picker.searchFailed', { error: searchError }) }}
       </p>
 
@@ -498,14 +496,14 @@ onMounted(() => {
            the user can still edit, rather than as a toast after the task is created. -->
       <p
         v-if="refState.status === 'checking'"
-        class="px-1 text-[11px] text-dimmed"
+        class="px-1 text-2xs text-dimmed"
         data-testid="doc-ref-checking"
       >
         {{ t('documents.picker.refChecking') }}
       </p>
       <div
         v-else-if="refRejection"
-        class="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-app-warning-400"
+        class="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-2xs text-app-warning-400"
         data-testid="doc-ref-rejected"
       >
         <span>{{ refRejection }}</span>
@@ -523,7 +521,7 @@ onMounted(() => {
       </div>
       <p
         v-else-if="refState.status === 'unchecked'"
-        class="px-1 text-[11px] text-app-warning-400"
+        class="px-1 text-2xs text-app-warning-400"
         data-testid="doc-ref-unchecked"
       >
         {{ t('documents.picker.refCheckFailed', { error: refState.message }) }}
@@ -532,7 +530,7 @@ onMounted(() => {
            at all reads as a picker that dropped it. -->
       <p
         v-else-if="refAlreadyAttached"
-        class="px-1 text-[11px] text-dimmed"
+        class="px-1 text-2xs text-dimmed"
         data-testid="doc-ref-already-attached"
       >
         {{ t('documents.picker.refAlreadyAttached') }}
@@ -585,7 +583,7 @@ onMounted(() => {
                 </template>
               </i18n-t>
             </span>
-            <span v-if="refRow.trimmed" class="block truncate text-[11px] text-dimmed">
+            <span v-if="refRow.trimmed" class="block truncate text-2xs text-dimmed">
               {{ t('documents.picker.refTrimmed') }}
             </span>
             <!-- A WIDENED reference, which the trim note above must never be left to imply: the
@@ -593,7 +591,7 @@ onMounted(() => {
                  around it. Amber and separate, because it is a loss rather than tidying. -->
             <span
               v-if="refRow.droppedScope"
-              class="block text-[11px] text-app-warning-400"
+              class="block text-2xs text-app-warning-400"
               data-testid="doc-ref-widened"
             >
               {{ t('documents.picker.refWidened', { scope: refRow.droppedScope }) }}

package/app/components/documents/DocumentImportModal.vue

@@ -2,6 +2,7 @@
 import type { DocumentSourceKind } from '~/types/domain'
 import DocumentSyncState from '~/components/documents/DocumentSyncState.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Import pages from a connected document source and pick one to expand into
 // board structure. A source selector lets the user choose which connected source
@@ -125,9 +126,9 @@ function preview(externalId: string) {
         </div>
 
         <div v-if="sourceDocs.length" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3">
             {{ t('documents.import.importedHeading') }}
-          </h3>
+          </SectionLabel>
           <div
             v-for="doc in sourceDocs"
             :key="`${doc.source}:${doc.externalId}`"

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -132,10 +132,10 @@ async function disconnect() {
           >
             {{ t('documents.connect.oauth.action', { source: descriptor.label }) }}
           </UButton>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('documents.connect.oauth.scopes', { scopes: oauth.scopes.join(', ') }) }}
           </p>
-          <p class="text-[11px] text-dimmed">{{ t('documents.connect.oauth.fallback') }}</p>
+          <p class="text-2xs text-dimmed">{{ t('documents.connect.oauth.fallback') }}</p>
         </div>
 
         <div class="space-y-3">

package/app/components/documents/DocumentSyncState.vue

@@ -165,7 +165,7 @@ async function refresh() {
 </script>
 
 <template>
-  <div class="flex items-center gap-1.5 text-[11px] text-dimmed">
+  <div class="flex items-center gap-1.5 text-2xs text-dimmed">
     <span class="truncate">
       {{ t('documents.freshness.updated', { when: d(new Date(props.doc.syncedAt), 'long') }) }}
     </span>

package/app/components/documents/DocumentTemplatesModal.vue

@@ -3,6 +3,7 @@ import { DOC_KINDS } from '~/types/domain'
 import type { DocKind, DocumentLinkRole, SourceDocument } from '~/types/domain'
 import DocumentOriginLink from '~/components/documents/DocumentOriginLink.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Manage the workspace's per-DocKind TEMPLATE (singular) + EXEMPLAR (multi) document links (WS1).
 // A kind can be pointed at one of the workspace's already-imported documents so its parsed
@@ -132,9 +133,9 @@ async function unlink(doc: SourceDocument) {
 
           <!-- Template (singular per kind) ------------------------------------ -->
           <section class="rounded-lg border border-default bg-default/50 p-3">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('documents.templates.templateHeading') }}
-            </h3>
+            </SectionLabel>
             <p class="mt-0.5 text-xs text-dimmed">
               {{ t('documents.templates.templateHint', { kind }) }}
             </p>
@@ -167,9 +168,9 @@ async function unlink(doc: SourceDocument) {
 
           <!-- Exemplars (multi per kind) -------------------------------------- -->
           <section class="rounded-lg border border-default bg-default/50 p-3">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('documents.templates.exemplarsHeading') }}
-            </h3>
+            </SectionLabel>
             <p class="mt-0.5 text-xs text-dimmed">
               {{ t('documents.templates.exemplarsHint') }}
             </p>

package/app/components/documents/RepoContextDocPicker.vue

@@ -238,7 +238,7 @@ onMounted(() => {
           class="w-full"
           :placeholder="t('documents.repoPicker.searchFilesPlaceholder')"
         />
-        <p v-if="filesError" class="px-1 text-[11px] text-app-warning-400">
+        <p v-if="filesError" class="px-1 text-2xs text-app-warning-400">
           {{ t('documents.repoPicker.filesFailed', { error: filesError }) }}
         </p>
         <div class="max-h-56 space-y-0.5 overflow-y-auto">
@@ -252,7 +252,7 @@ onMounted(() => {
             <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
             <span class="truncate">{{ f.path }}</span>
           </button>
-          <p v-if="fileMatchesTruncated" class="px-2 py-1 text-[11px] text-dimmed">
+          <p v-if="fileMatchesTruncated" class="px-2 py-1 text-2xs text-dimmed">
             {{ t('documents.repoPicker.moreFiles', { count: FILE_RESULTS_CAP }) }}
           </p>
           <EmptyState
@@ -261,10 +261,7 @@ onMounted(() => {
             icon="i-lucide-file-search"
             :title="t('documents.repoPicker.noFileMatches')"
           />
-          <p
-            v-else-if="!loadingFiles && !fileQuery.trim()"
-            class="px-2 py-1 text-[11px] text-dimmed"
-          >
+          <p v-else-if="!loadingFiles && !fileQuery.trim()" class="px-2 py-1 text-2xs text-dimmed">
             {{ t('documents.repoPicker.searchFilesHint') }}
           </p>
         </div>

package/app/components/documents/StartFromDesignModal.vue

@@ -191,18 +191,18 @@ function stage() {
               <UIcon name="i-lucide-frame" class="h-4 w-4 text-primary" />
               <span class="truncate">{{ row.label }}</span>
             </div>
-            <p v-if="row.trimmed" class="text-[11px] text-muted">
+            <p v-if="row.trimmed" class="text-2xs text-muted">
               {{ t('documents.startFromDesign.trimmed') }}
             </p>
             <!-- Its own line, in amber: a trim resolves the same page, a drop widens ONE frame to
                  the whole design file, and the second is what a designer needs to see. -->
-            <p v-if="row.droppedScope" class="text-[11px] text-app-warning-300">
+            <p v-if="row.droppedScope" class="text-2xs text-app-warning-300">
               {{ t('documents.startFromDesign.widened', { scope: row.droppedScope }) }}
             </p>
-            <p v-if="row.unchecked && target" class="text-[11px] text-muted">
+            <p v-if="row.unchecked && target" class="text-2xs text-muted">
               {{ t('documents.startFromDesign.unchecked') }}
             </p>
-            <p v-else-if="row.unchecked" class="text-[11px] text-app-warning-300">
+            <p v-else-if="row.unchecked" class="text-2xs text-app-warning-300">
               {{ t('documents.startFromDesign.uncheckedAmbiguous') }}
             </p>
           </div>

package/app/components/documents/TaskContextDocs.vue

@@ -165,7 +165,7 @@ async function attach(item: PendingContext) {
         <DocumentSyncState :doc="doc" class="mt-1" />
       </div>
     </div>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ emptyHint }}
     </p>
   </InspectorSection>

package/app/components/environments/EnvSetupStepper.vue

@@ -37,10 +37,10 @@ function stepLabel(key: string | undefined): string {
 
 <template>
   <div class="space-y-2" data-testid="env-setup-stepper">
-    <p v-if="total" class="text-[11px] font-medium text-muted" data-testid="env-setup-progress">
+    <p v-if="total" class="text-2xs font-medium text-muted" data-testid="env-setup-progress">
       {{ t('environmentWizard.progress', { index: index + 1, total }) }}
     </p>
-    <ol class="flex items-center gap-2 text-[11px]">
+    <ol class="flex items-center gap-2 text-2xs">
       <li
         v-for="(step, i) in steps"
         :key="step.entry"
@@ -48,7 +48,7 @@ function stepLabel(key: string | undefined): string {
         :data-testid="`env-setup-crumb-${step.entry}`"
       >
         <span
-          class="flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold"
+          class="flex h-5 w-5 items-center justify-center rounded-full text-3xs font-semibold"
           :class="{
             'bg-primary text-inverted': i === index,
             'bg-app-success-600/70 text-highlighted': i < index,

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -9,6 +9,7 @@ import {
   readStatusNote,
   showsProviderFailure,
 } from '~/components/environments/EnvironmentStatusPanel.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   environment: RunEnvironment | null
@@ -106,11 +107,11 @@ const envInTransition = computed(
 
 <template>
   <section class="rounded-lg border border-default bg-default/60 p-3">
-    <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+    <SectionLabel as="h3" class="mb-2">
       {{ t('environments.title') }}
-    </h3>
+    </SectionLabel>
     <div v-if="environment" class="space-y-2">
-      <div class="flex items-center gap-2 text-[13px]">
+      <div class="flex items-center gap-2 text-sm">
         <UIcon
           :name="ENV_STATUS_META[environment.status].icon"
           class="h-3.5 w-3.5"
@@ -128,22 +129,22 @@ const envInTransition = computed(
         :href="environment.url"
         target="_blank"
         rel="noopener"
-        class="inline-flex items-center gap-1.5 break-all text-[13px] text-app-info-300 hover:underline"
+        class="inline-flex items-center gap-1.5 break-all text-sm text-app-info-300 hover:underline"
       >
         <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
         {{ environment.url }}
       </a>
-      <p v-if="environment.expiresAt" class="text-[11px] text-dimmed">
+      <p v-if="environment.expiresAt" class="text-2xs text-dimmed">
         {{ t('environments.expires', { date: d(new Date(environment.expiresAt), 'long') }) }}
       </p>
       <!-- The resolved provision type + engine recorded at provision time, so a run states
            exactly what was provisioned and how (the what/where ÷ how split). -->
       <dl v-if="provisionTypeLabel || engineLabel" class="flex flex-wrap gap-x-4 gap-y-0.5">
-        <div v-if="provisionTypeLabel" class="flex items-center gap-1 text-[11px]">
+        <div v-if="provisionTypeLabel" class="flex items-center gap-1 text-2xs">
           <dt class="text-dimmed">{{ t('environments.provisionTypeLabel') }}</dt>
           <dd class="text-toned">{{ provisionTypeLabel }}</dd>
         </div>
-        <div v-if="engineLabel" class="flex items-center gap-1 text-[11px]">
+        <div v-if="engineLabel" class="flex items-center gap-1 text-2xs">
           <dt class="text-dimmed">{{ t('environments.engineLabel') }}</dt>
           <dd class="text-toned">{{ engineLabel }}</dd>
         </div>
@@ -151,7 +152,7 @@ const envInTransition = computed(
       <!-- The verbatim provider error when the environment failed/expired. -->
       <pre
         v-if="failureShown"
-        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded border border-app-error-900/60 bg-app-error-950/40 p-1.5 text-[11px] text-app-error-200/90"
+        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded-sm border border-app-error-900/60 bg-app-error-950/40 p-1.5 text-2xs text-app-error-200/90"
         >{{ environment.lastError }}</pre>
       <!-- What the provider says it is still waiting on. Muted rather than alarming: an
            environment mid-rollout is healthy, and styling this like the error above would report
@@ -159,12 +160,12 @@ const envInTransition = computed(
            prose. -->
       <p
         v-if="statusNote"
-        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words text-[11px] text-muted"
+        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words text-2xs text-muted"
       >
         {{ t('environments.statusNote', { note: statusNote }) }}
       </p>
     </div>
-    <p v-else class="text-[12px] text-dimmed">
+    <p v-else class="text-xs text-dimmed">
       {{ degradedReason ?? t('environments.empty') }}
     </p>
   </section>

package/app/components/environments/steps/EnvPreflightStep.vue

@@ -51,21 +51,21 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
 
     <p
       v-if="!store.recipe.prerequisites?.length"
-      class="text-[12px] text-dimmed"
+      class="text-xs text-dimmed"
       data-testid="env-setup-preflight-none"
     >
       {{ t('environmentWizard.preflight.none') }}
     </p>
     <p
       v-else-if="preflightsUnavailable"
-      class="text-[12px] text-app-warning-300/80"
+      class="text-xs text-app-warning-300/80"
       data-testid="env-setup-preflight-unavailable"
     >
       {{ t('environmentWizard.preflight.unavailable') }}
     </p>
     <p
       v-if="store.preflightError"
-      class="text-[12px] text-app-error-300/80"
+      class="text-xs text-app-error-300/80"
       data-testid="env-setup-preflight-error"
     >
       {{ store.preflightError }}
@@ -79,21 +79,21 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
       <li
         v-for="r in store.preflightResults"
         :key="r.title"
-        class="rounded border border-default bg-default/40 p-2"
+        class="rounded-sm border border-default bg-default/40 p-2"
       >
         <div class="flex items-center gap-2">
           <UBadge :color="PREFLIGHT_COLOR[r.status]" variant="subtle" size="sm">
             {{ r.status }}
           </UBadge>
-          <span class="text-[12px] text-default">{{ r.title }}</span>
-          <span v-if="!r.required" class="ms-auto text-[10px] text-dimmed">
+          <span class="text-xs text-default">{{ r.title }}</span>
+          <span v-if="!r.required" class="ms-auto text-3xs text-dimmed">
             {{ t('environmentWizard.preflight.optional') }}
           </span>
         </div>
-        <p v-if="r.detail" class="mt-1 text-[11px] text-muted">{{ r.detail }}</p>
+        <p v-if="r.detail" class="mt-1 text-2xs text-muted">{{ r.detail }}</p>
         <pre
           v-if="r.status !== 'pass' && r.remediation"
-          class="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-app-warning-900/40 bg-app-warning-950/20 p-1.5 text-[11px] text-app-warning-200/90"
+          class="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded-sm border border-app-warning-900/40 bg-app-warning-950/20 p-1.5 text-2xs text-app-warning-200/90"
           >{{ r.remediation }}</pre>
       </li>
     </ul>