fix(medications): localise the dose unit and lift it onto its own line

A medication's dose is stored as free text the wizard composes from an
amount and a unit token ("1 pieces", "2 tablets"), and the card rendered
that token verbatim glued onto the name — so the unit showed in English
on every locale and the title read "Test ABC 1 pieces".

Translate the dose at display time: a formatDose helper splits the stored
string and runs a known unit token through the existing unit messages, so
"1 pieces" reads "1 Stück" / "1 piece(s)" per locale while a custom
free-text dose passes through untouched. The card header now carries the
name alone on its title line with the dose on a muted line beneath it,
above the category badge; the detail view, table and intake dialogs
localise the same way. Vorsorge and lab rows pass an empty dose so they
render no extra line.

src/components/medications/__tests__/medication-card-glp1.test.tsx

@@ -283,7 +283,7 @@ describe("<Glp1MedicationCard> — GLP-1 variant rendering", () => {
     expect(html).not.toContain("Dose history");
   });
 
-  it("shows drug name + current dose on line 1 ('Mounjaro 7.5 mg')", () => {
+  it("shows drug name on line 1 and the dose on its own line below", () => {
     const client = makeClient();
     seedCompliance(client, med7p5.id);
     seedGlp1Details(client, med7p5.id, {});
@@ -299,10 +299,10 @@ describe("<Glp1MedicationCard> — GLP-1 variant rendering", () => {
 
     expect(html).toContain("Mounjaro");
     expect(html).toContain("7.5 mg");
-    // v1.4.28 FB-G1 — the GLP-1 row drops the middle-dot separator and
-    // surfaces `{name} {dose}` together on line 1 via the shared
-    // `<MedicationCardHeader>` primitive. The dot separator is gone.
-    expect(html).toContain("Mounjaro 7.5 mg");
+    // FB-G1 — the GLP-1 row drops the middle-dot separator; the dose now
+    // rides its OWN muted line under the name (the shared
+    // `<MedicationCardHeader>` primitive), localised via `formatDose`.
+    expect(html).toContain('data-slot="medication-card-header-dose"');
   });
 
   it("shows last + next injection labels with localised weekday", () => {

src/components/medications/__tests__/medication-card-header.test.tsx

@@ -9,8 +9,9 @@ import { MedicationCardHeader } from "@/components/medications/medication-card-h
  * v1.4.28 — narrow-viewport contract for the shared medication-list
  * row primitive (D-H6).
  *
- * FB-G1 calls for a two-line shape: `{name} {dose}` on line 1 and the
- * category badge on line 2. State badges (without-notification, paused,
+ * FB-G1 calls for a stacked shape: `{name}` on line 1, the localised
+ * `{dose}` on its own muted line below it (omitted when empty), and the
+ * category badge under that. State badges (without-notification, paused,
  * inactive) used to share line 2 via `flex flex-wrap`; on a 320 px
  * viewport that pushed the row to three lines for ~20 % of configured
  * drugs. State badges now ride their own row below the category badge
@@ -27,7 +28,7 @@ function render(node: React.ReactNode) {
 }
 
 describe("<MedicationCardHeader>", () => {
-  it("paints `{name} {dose}` on the title row", () => {
+  it("paints the name on the title row and the dose on its own muted line", () => {
     const html = render(
       <MedicationCardHeader
         name="Ramipril"
@@ -35,8 +36,29 @@ describe("<MedicationCardHeader>", () => {
         categoryLabel="Blood Pressure"
       />,
     );
-    expect(html).toContain("Ramipril 5 mg");
+    // Name + dose are now separate elements — the dose rides its own
+    // `data-slot` line directly under the title, not glued to the name.
+    expect(html).toContain("Ramipril");
+    expect(html).toContain('data-slot="medication-card-header-dose"');
+    expect(html).toContain("5 mg");
     expect(html).toContain("Blood Pressure");
+    // The dose line paints between the name and the category badge.
+    const nameIdx = html.indexOf("Ramipril");
+    const doseIdx = html.indexOf('data-slot="medication-card-header-dose"');
+    const categoryIdx = html.indexOf("Blood Pressure");
+    expect(nameIdx).toBeLessThan(doseIdx);
+    expect(doseIdx).toBeLessThan(categoryIdx);
+  });
+
+  it("omits the dose line entirely when the dose is empty", () => {
+    const html = render(
+      <MedicationCardHeader
+        name="Vorsorge"
+        dose=""
+        categoryLabel="Screening"
+      />,
+    );
+    expect(html).not.toContain('data-slot="medication-card-header-dose"');
   });
 
   it("does not paint the state-badges row when no badges are supplied", () => {
@@ -100,8 +122,9 @@ describe("<MedicationCardHeader>", () => {
     expect(html).toContain('data-slot="medication-card-header-link"');
     expect(html).toContain('href="/medications/med-1"');
     expect(html).toContain('aria-label="Open medication detail page"');
-    // The title still rides inside the link region.
-    expect(html).toContain("Ramipril 5 mg");
+    // The name + dose still ride inside the link region.
+    expect(html).toContain("Ramipril");
+    expect(html).toContain("5 mg");
   });
 
   it("falls back to a non-navigating div when href is omitted", () => {

src/components/medications/detail/medication-detail-tabs.tsx

@@ -80,6 +80,7 @@ import { queryKeys } from "@/lib/query-keys";
 import { formatUnitCount } from "@/components/medications/units-per-dose";
 import { apiGet } from "@/lib/api/api-fetch";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
+import { formatDose } from "@/lib/medications/format-dose";
 import type { MedicationPayload } from "@/components/medications/wizard/wizard-payload";
 import type { ComplianceDisplay } from "@/lib/analytics/compliance";
 
@@ -392,7 +393,7 @@ export function MedicationDetailTabs({
           page" and misled). `?edit=1` still opens the wizard directly. */}
       <MedicationDetailSummary
         name={medication.name}
-        dose={medication.dose}
+        dose={formatDose(medication.dose, t)}
         active={medication.active}
         endsOn={medication.endsOn}
         payload={payload}

src/components/medications/glp1-medication-card.tsx

@@ -18,6 +18,7 @@ import {
 import { apiGet, apiPost } from "@/lib/api/api-fetch";
 import { formatDateTime, formatTime } from "@/lib/format";
 import { getMedicationCategoryLabel } from "@/lib/medications/category-label";
+import { formatDose } from "@/lib/medications/format-dose";
 import { type InjectionSiteKey } from "@/lib/medications/injection-sites";
 import { LogInjectionSiteDialog } from "@/components/medications/log-injection-site-dialog";
 import { useGlobalExcludedInjectionSites } from "@/lib/medications/use-injection-site-prefs";
@@ -483,7 +484,7 @@ export function Glp1MedicationCard({
   return (
     <MedicationCardBody
       name={medication.name}
-      dose={medication.dose}
+      dose={formatDose(medication.dose, t)}
       categoryLabel={categoryLabel}
       active={medication.active}
       href={`/medications/${medication.id}`}

src/components/medications/log-intake-dialog.tsx

@@ -39,6 +39,7 @@ import { DateTimeField } from "@/components/ui/date-time-field";
 import { NativeSelect } from "@/components/ui/native-select";
 import { Switch } from "@/components/ui/switch";
 import { useTranslations } from "@/lib/i18n/context";
+import { formatDose } from "@/lib/medications/format-dose";
 import { runLogIntake } from "@/components/medications/use-medication-intake";
 
 interface LogIntakeSchedule {
@@ -243,7 +244,7 @@ export function LogIntakeDialog({
                 >
                   {medications.map((m) => (
                     <option key={m.id} value={m.id}>
-                      {m.dose ? `${m.name} — ${m.dose}` : m.name}
+                      {m.dose ? `${m.name} — ${formatDose(m.dose, t)}` : m.name}
                     </option>
                   ))}
                 </NativeSelect>

src/components/medications/medication-card-header.tsx

@@ -14,8 +14,9 @@ import { CardHeader, CardTitle } from "@/components/ui/card";
  * route their title + dose + drug class through this primitive so the
  * surface stays one consistent shape:
  *
- *   Line 1: `{name} {dose}` — bold, `text-lg`
- *   Line 2: `{categoryLabel}` outline badge + optional state badges
+ *   Line 1: `{name}` — bold, `text-lg`
+ *   Line 2: `{dose}` — muted, rendered only when non-empty
+ *   Line 3: `{categoryLabel}` outline badge + optional state badges
  *
  * The trailing `actions` slot carries the overflow kebab on the right of
  * the row. State badges (without-notification, paused-since, inactive)
@@ -78,11 +79,22 @@ export function MedicationCardHeader({
   const body = (
     <>
       <CardTitle className="flex flex-wrap items-center gap-x-2 gap-y-1 text-lg">
-        <span>
-          {name} {dose}
-        </span>
+        <span>{name}</span>
         {nameChip}
       </CardTitle>
+      {/* The dose sits on its OWN muted line directly under the name, above
+          the category badge. Rendered only when a non-empty dose string is
+          supplied — Vorsorge / lab-list rows pass `dose=""` and get no empty
+          line. The unit is already localised by `formatDose` at the call
+          site (the raw `Medication.dose` carries the English unit key). */}
+      {dose ? (
+        <p
+          data-slot="medication-card-header-dose"
+          className="text-muted-foreground text-sm"
+        >
+          {dose}
+        </p>
+      ) : null}
       {/* D-H6 — state badges (without-notification, paused-since,
           inactive) used to share line 2 with the category badge
           via `flex flex-wrap`. At 320 px any state badge pushed

src/components/medications/medication-card.tsx

@@ -11,6 +11,7 @@ import { useWeekdayLabel } from "@/components/medications/card-parts/medication-
 import { formatTimeWindowRange } from "@/lib/time-window-format";
 import { formatDateTime, formatTime } from "@/lib/format";
 import { getMedicationCategoryLabel } from "@/lib/medications/category-label";
+import { formatDose } from "@/lib/medications/format-dose";
 import {
   reduceCurrentWindowStatus,
   toZonedDate,
@@ -462,7 +463,7 @@ export function MedicationCard({
   return (
     <MedicationCardBody
       name={medication.name}
-      dose={medication.dose}
+      dose={formatDose(medication.dose, t)}
       categoryLabel={categoryLabel}
       active={medication.active}
       href={`/medications/${medication.id}`}

src/components/medications/medication-order-editor.tsx

@@ -24,6 +24,7 @@ import { Button } from "@/components/ui/button";
 import { reorderById } from "@/lib/insights-layout-reorder";
 import { prefersReducedMotion } from "@/lib/charts/reduced-motion";
 import { useTranslations } from "@/lib/i18n/context";
+import { formatDose } from "@/lib/medications/format-dose";
 import { runSaveMedicationListOrder } from "@/lib/queries/use-medication-list-layout";
 
 /**
@@ -321,6 +322,7 @@ function SortableMedicationRow({
   labels,
   onMove,
 }: SortableMedicationRowProps) {
+  const { t } = useTranslations();
   const {
     attributes,
     listeners,
@@ -363,7 +365,7 @@ function SortableMedicationRow({
           {medication.name}
         </span>
         <span className="text-muted-foreground block truncate text-xs">
-          {medication.dose}
+          {formatDose(medication.dose, t)}
           {!medication.active && <> · {labels.inactive}</>}
         </span>
       </span>

src/components/medications/medication-table.tsx

@@ -35,6 +35,7 @@ import {
 import { formatTime } from "@/lib/format";
 import { formatTimeWindowRange } from "@/lib/time-window-format";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
+import { formatDose } from "@/lib/medications/format-dose";
 import { queryKeys } from "@/lib/query-keys";
 import { apiGet } from "@/lib/api/api-fetch";
 import {
@@ -649,7 +650,7 @@ function MedicationTableRowItem({
             {medication.name}
           </span>
           <span className="text-muted-foreground block text-xs">
-            {medication.dose}
+            {formatDose(medication.dose, t)}
             {!medication.active && <> · {t("common.inactive")}</>}
           </span>
         </Link>

src/components/medications/take-all-due-dialog.tsx

@@ -28,6 +28,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useTranslations } from "@/lib/i18n/context";
+import { formatDose } from "@/lib/medications/format-dose";
 import { formatTimeWindowRange } from "@/lib/time-window-format";
 import {
   runTakeAllDue,
@@ -88,7 +89,10 @@ export function TakeAllDueDialog({
               <span className="min-w-0 truncate">
                 <span className="font-medium">{med.name}</span>
                 {med.dose ? (
-                  <span className="text-muted-foreground"> — {med.dose}</span>
+                  <span className="text-muted-foreground">
+                    {" "}
+                    — {formatDose(med.dose, t)}
+                  </span>
                 ) : null}
               </span>
               {med.window ? (

src/components/medications/wizard/steps/step3-dose.tsx

@@ -22,30 +22,11 @@ import {
 } from "@/lib/medications/injection-sites";
 import type { MedicationDeliveryForm } from "@/lib/validations/medication";
 import { unitsPerDoseOptionsFor } from "@/components/medications/units-per-dose";
+import { DOSE_UNIT_KEYS } from "@/lib/medications/dose-units";
 import { useTranslations } from "@/lib/i18n/context";
 
 import type { StepProps } from "./step1-name";
 
-/**
- * Dose unit choices, ordered so mg / ml / IE / µg lead and the
- * device-form units (Tablette, Hub, Sprühstoß, …) follow. Mirrors the
- * v1.5.3 list with the maintainer-requested order tightening.
- */
-const DOSE_UNIT_KEYS = [
-  "mg",
-  "ml",
-  "iu",
-  "mcg",
-  "g",
-  "tablets",
-  "capsules",
-  "drops",
-  "puffs",
-  "sprays",
-  "pieces",
-  "other",
-] as const;
-
 const DELIVERY_FORM_KEYS: readonly MedicationDeliveryForm[] = [
   "ORAL",
   "INJECTION",