fix(ui): tidy the new record and settings surfaces at phone width

- Composition amounts show only the decimals they carry, so 100 µg no
  longer reads as 100.000 µg; the remove button stays on the amount row.
- AUDIT-C remove controls are icon-only, so they no longer spill out of
  the card or cover the earlier answer.
- Life-circumstance labels keep their colon when they wrap, checkbox
  groups sit in two columns and the weekly-minutes sentence ends.
- Link chips get a 44 px hit area for their remove control.
- The AI usage level reports a failed save with a sentence and the
  error id instead of a bare "Error".
- The Dawarich home-country and admin refresh-gap labels sit above
  their fields.

src/components/records/audit-c-panel.tsx

@@ -163,7 +163,7 @@ export function AuditCPanel({
                   })}
                 </span>
                 <ConfirmButton
-                  label={t("records.life.auditC.remove")}
+                  label=""
                   ariaLabel={t("records.life.auditC.remove")}
                   title={t("records.life.auditC.removeConfirmTitle")}
                   body={t("records.life.auditC.removeConfirmBody")}
@@ -173,7 +173,7 @@ export function AuditCPanel({
                   disabled={remove.isPending}
                   variant="ghost"
                   size="icon"
-                  className="text-destructive min-h-11 sm:min-h-9"
+                  className="text-destructive size-11 shrink-0 sm:size-9"
                   icon={<Trash2 className="size-4" aria-hidden />}
                   slot={`audit-c-remove-${entry.id}`}
                 />
@@ -188,7 +188,7 @@ export function AuditCPanel({
           className="flex items-start justify-between gap-2"
           data-slot="audit-c-legacy-pattern"
         >
-          <div className="space-y-1">
+          <div className="min-w-0 flex-1 space-y-1">
             <p className="text-sm">
               {t("records.life.auditC.legacyLabel", {
                 value: t(
@@ -201,7 +201,7 @@ export function AuditCPanel({
             </p>
           </div>
           <ConfirmButton
-            label={t("records.life.auditC.legacyRemove")}
+            label=""
             ariaLabel={t("records.life.auditC.legacyRemove")}
             title={t("records.life.auditC.legacyRemoveConfirmTitle")}
             body={t("records.life.auditC.legacyRemoveConfirmBody")}
@@ -211,7 +211,7 @@ export function AuditCPanel({
             disabled={removeLegacy.isPending}
             variant="ghost"
             size="icon"
-            className="text-destructive min-h-11 sm:min-h-9"
+            className="text-destructive size-11 shrink-0 sm:size-9"
             icon={<Trash2 className="size-4" aria-hidden />}
             slot="audit-c-legacy-remove"
           />

src/components/records/life-circumstances-manager.tsx

@@ -185,7 +185,11 @@ function Field({
 }) {
   return (
     <div className="space-y-1.5">
-      <Label htmlFor={id}>{label}</Label>
+      {/* Block, so the colon follows a label that wraps instead of standing
+          alone at the far edge as a flex item. */}
+      <Label htmlFor={id} className="block leading-snug">
+        {label}
+      </Label>
       {children}
     </div>
   );
@@ -324,16 +328,17 @@ function MultiField<T extends string>({
     <fieldset className="space-y-2" data-slot={id}>
       <legend className="text-sm font-medium">{label}</legend>
       {hint ? <p className="text-muted-foreground text-xs">{hint}</p> : null}
-      <div className="grid gap-x-3 gap-y-2 sm:grid-cols-2">
+      <div className="grid grid-cols-2 gap-x-3 gap-y-2">
         {options.map((option) => {
           const checked = value.includes(option.value);
           const full = max !== undefined && value.length >= max && !checked;
           return (
             <label
               key={option.value}
-              className="flex min-h-11 items-center gap-2 text-sm sm:min-h-9"
+              className="flex min-h-11 min-w-0 items-center gap-2 text-sm sm:min-h-9"
             >
               <Checkbox
+                className="shrink-0"
                 checked={checked}
                 disabled={disabled || full}
                 onCheckedChange={(next) =>