fix(measurements): keep blood-pressure field labels on one line

In the three-column blood-pressure entry grid the "Systolic (mmHg)" /
"Diastolic (mmHg)" / "Pulse (bpm)" labels wrapped onto a second line in
narrow columns. Render the localised label as the metric name (which
truncates if it must) plus the unit as a compact muted affix that never
wraps, so each field reads on a single line while keeping its unit.

CHANGELOG.md

@@ -10,6 +10,7 @@ A focused fix release. No schema change.
 
 - **The time picker now follows your 24-hour preference.** The earlier fix corrected the times shown across the app, but tapping a date/time field still opened the browser's own time picker — which renders its clock (and the AM/PM toggle) by the browser's language, not the app's. On an English-language browser you saw AM/PM even with 24-hour selected. The field now uses its own time picker, so hours/minutes always follow your preference (24-hour, 12-hour, or automatic) in every browser. The date half keeps the familiar native calendar.
 - The doctor-report PDF's "generated at" timestamp now honors the time-format preference as well, instead of falling back to the locale default.
+- When adding a blood-pressure reading, the systolic / diastolic / pulse field labels no longer wrap onto a second line in the three-column layout — the metric name stays prominent and its unit (mmHg / bpm) sits beside it as a compact affix.
 
 ## [1.25.3] — 2026-06-29 — Mental wellbeing, labs depth, and fixes
 

src/components/measurements/measurement-form.tsx

@@ -190,6 +190,30 @@ function getDefaultMeasuredAtValue() {
   return local.toISOString().slice(0, 16);
 }
 
+/**
+ * Field label that keeps the "Name (unit)" translation on a single line even
+ * in the narrow three-column blood-pressure grid: the metric name truncates if
+ * it must, while the unit renders as a small muted affix that never wraps. The
+ * label strings stay localised — we split the trailing "(unit)" the catalogue
+ * already carries rather than dropping it (so "mmHg" / "bpm" / locale variants
+ * like "lpm" survive).
+ */
+function UnitLabel({ htmlFor, label }: { htmlFor: string; label: string }) {
+  const match = /^(.*?)\s*\(([^)]*)\)\s*$/.exec(label);
+  const name = match ? match[1] : label;
+  const unit = match ? match[2] : null;
+  return (
+    <Label htmlFor={htmlFor} className="flex items-baseline gap-1">
+      <span className="truncate">{name}</span>
+      {unit ? (
+        <span className="text-muted-foreground shrink-0 text-xs font-normal">
+          {unit}
+        </span>
+      ) : null}
+    </Label>
+  );
+}
+
 export function MeasurementForm({
   onSuccess,
   onCancel,
@@ -383,7 +407,7 @@ export function MeasurementForm({
       {isBpMode ? (
         <div className="grid gap-4 sm:grid-cols-3">
           <div className="space-y-2">
-            <Label htmlFor="sys">{t("measurements.systolicLabel")}</Label>
+            <UnitLabel htmlFor="sys" label={t("measurements.systolicLabel")} />
             <Input
               id="sys"
               type="number"
@@ -402,7 +426,7 @@ export function MeasurementForm({
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="dia">{t("measurements.diastolicLabel")}</Label>
+            <UnitLabel htmlFor="dia" label={t("measurements.diastolicLabel")} />
             <Input
               id="dia"
               type="number"
@@ -421,7 +445,7 @@ export function MeasurementForm({
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="puls">{t("measurements.pulseLabel")}</Label>
+            <UnitLabel htmlFor="puls" label={t("measurements.pulseLabel")} />
             <Input
               id="puls"
               type="number"