From 37f922af9733ab0b09be0ffdf0b4e7b7f0cc741a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 8 Oct 2026 20:20:03 +0200
Subject: [PATCH] Fix settings field rows, defaults and narrow layouts

Module rows drop the field-label colon and inset, the reminder number
fields align, target defaults print at their own precision, the
appointment offer wraps instead of squeezing to one word per line, the
export format legend matches its neighbour label, and the profile-photo
explainer reads as body text.
---
 .../__tests__/password-card-placement.test.tsx        |  2 +-
 .../__tests__/thresholds-editor-glucose-unit.test.tsx |  9 +++++++++
 .../settings/account-section/avatar-section.tsx       |  4 ++--
 src/components/settings/low-stock-card.tsx            |  8 ++++----
 src/components/settings/module-toggle-row.tsx         |  5 ++++-
 src/components/settings/mood-reminder-card.tsx        |  6 +++---
 src/components/settings/password-card.tsx             |  4 ++--
 .../settings/report-selection/report-visit-offer.tsx  |  9 ++++++---
 .../settings/report-selection/selection-panel.tsx     |  2 +-
 src/components/settings/thresholds-editor-section.tsx | 11 +++++++++--
 10 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/components/settings/__tests__/password-card-placement.test.tsx b/src/components/settings/__tests__/password-card-placement.test.tsx
index e08ced3b9..57618e9ff 100644
--- a/src/components/settings/__tests__/password-card-placement.test.tsx
+++ b/src/components/settings/__tests__/password-card-placement.test.tsx
@@ -113,7 +113,7 @@ describe("change-password card placement", () => {
       "utf8",
     );
     for (const marker of [
-      "settings.passwordReset",
+      "settings.passwordTitle",
       "settings.changePassword",
       "/api/auth/password",
       // A change-password form is the pair current + new. The Account form
diff --git a/src/components/settings/__tests__/thresholds-editor-glucose-unit.test.tsx b/src/components/settings/__tests__/thresholds-editor-glucose-unit.test.tsx
index 362d029b6..134ed4e60 100644
--- a/src/components/settings/__tests__/thresholds-editor-glucose-unit.test.tsx
+++ b/src/components/settings/__tests__/thresholds-editor-glucose-unit.test.tsx
@@ -73,4 +73,13 @@ describe("<ThresholdsEditorSection> glucose unit", () => {
     expect(html).toContain('value="72"');
     expect(html).toContain('min="40"');
   });
+
+  it("prints a whole-number default without a trailing .0", () => {
+    // A bound reads at its own precision: the fixed one decimal printed
+    // "70.0–99.0 mg/dL" and "8,000.0–15,000.0 steps".
+    authUser.current = { glucoseUnit: "mg/dL", unitPreference: "metric" };
+    const html = render();
+    expect(html).toMatch(/70–99 mg\/dL/);
+    expect(html).not.toMatch(/70\.0–99\.0/);
+  });
 });
diff --git a/src/components/settings/account-section/avatar-section.tsx b/src/components/settings/account-section/avatar-section.tsx
index 2ed7576a1..1da325672 100644
--- a/src/components/settings/account-section/avatar-section.tsx
+++ b/src/components/settings/account-section/avatar-section.tsx
@@ -114,7 +114,7 @@ export function AvatarSection() {
           Two strings rather than one merged key: the same wording is the
           upload's own constraint copy, and a translator keeps the shorter unit
           either way. */}
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm">
         {t("settings.avatar.description")} {t("settings.avatar.hint")}
       </p>
       <div className="flex items-center gap-4">
@@ -171,7 +171,7 @@ export function AvatarSection() {
       {msg && (
         <p
           role="alert"
-          className={`mt-3 text-sm ${
+          className={`text-sm ${
             msgType === "success" ? "text-success" : "text-destructive"
           }`}
         >
diff --git a/src/components/settings/low-stock-card.tsx b/src/components/settings/low-stock-card.tsx
index df910d221..d6a49c46e 100644
--- a/src/components/settings/low-stock-card.tsx
+++ b/src/components/settings/low-stock-card.tsx
@@ -244,7 +244,7 @@ export function LowStockCard({
       />
       <p className="text-sm">{t("notifications.lowStock.detail")}</p>
       {enabled && (
-        <div className="flex min-h-11 items-center gap-3">
+        <div className="flex min-h-11 items-center justify-between gap-3">
           <label htmlFor="low-stock-days" className="text-sm font-medium">
             {t("notifications.lowStock.daysLabel")}
           </label>
@@ -254,7 +254,7 @@ export function LowStockCard({
             inputMode="numeric"
             min={MIN_DAYS}
             max={MAX_DAYS}
-            className="w-auto"
+            className="w-24 text-right tabular-nums"
             value={draft ?? String(days)}
             disabled={!isAuthenticated || saving}
             onChange={(e) => setDraft(e.target.value)}
@@ -275,7 +275,7 @@ export function LowStockCard({
           own supply tab. */}
       {enabled && (
         <div>
-          <div className="flex min-h-11 items-center gap-3">
+          <div className="flex min-h-11 items-center justify-between gap-3">
             <label htmlFor="low-stock-lead" className="text-sm font-medium">
               {t("notifications.lowStock.leadLabel")}
             </label>
@@ -285,7 +285,7 @@ export function LowStockCard({
               inputMode="numeric"
               min={MIN_LEAD}
               max={MAX_LEAD}
-              className="w-auto"
+              className="w-24 text-right tabular-nums"
               value={leadDraft ?? String(leadDays)}
               disabled={!isAuthenticated || saving}
               onChange={(e) => setLeadDraft(e.target.value)}
diff --git a/src/components/settings/module-toggle-row.tsx b/src/components/settings/module-toggle-row.tsx
index 912739990..557fa074b 100644
--- a/src/components/settings/module-toggle-row.tsx
+++ b/src/components/settings/module-toggle-row.tsx
@@ -98,7 +98,10 @@ export function ModuleToggleRow({
           aria-hidden="true"
         />
         <div className="min-w-0 space-y-0.5">
-          <Label htmlFor={inputId} className="text-sm font-medium">
+          {/* A row title beside a switch, not a field label: no colon, and
+              on the description's left edge (the primitive's `pl-1` would
+              inset it), matching the admin `SettingsToggle` rows. */}
+          <Label htmlFor={inputId} noColon className="pl-0 text-sm font-medium">
             {label}
           </Label>
           <p className="text-muted-foreground text-xs">{description}</p>
diff --git a/src/components/settings/mood-reminder-card.tsx b/src/components/settings/mood-reminder-card.tsx
index 0d814b3a5..530d190ee 100644
--- a/src/components/settings/mood-reminder-card.tsx
+++ b/src/components/settings/mood-reminder-card.tsx
@@ -203,7 +203,7 @@ export function MoodReminderCard({
       />
       <p className="text-sm">{t("notifications.moodReminder.detail")}</p>
       {enabled && (
-        <div className="flex min-h-11 items-center gap-3">
+        <div className="flex min-h-11 items-center justify-between gap-3">
           <label htmlFor="mood-reminder-hour" className="text-sm font-medium">
             {t("notifications.moodReminder.hourLabel")}
           </label>
@@ -229,8 +229,8 @@ export function MoodReminderCard({
           aria-live="polite"
           className={
             msgType === "error"
-              ? "text-destructive mt-3 text-sm"
-              : "text-muted-foreground mt-3 text-sm"
+              ? "text-destructive text-sm"
+              : "text-muted-foreground text-sm"
           }
         >
           {msg}
diff --git a/src/components/settings/password-card.tsx b/src/components/settings/password-card.tsx
index f75ab93f1..5b82d4ec0 100644
--- a/src/components/settings/password-card.tsx
+++ b/src/components/settings/password-card.tsx
@@ -96,7 +96,7 @@ export function PasswordCard() {
       <SettingsCard data-slot="settings-password-card">
         <SettingsCardHeader
           icon={Shield}
-          title={t("settings.passwordReset")}
+          title={t("settings.passwordTitle")}
           description={t("settings.changePasswordDescription")}
         />
         <SettingsCardActions>
@@ -122,7 +122,7 @@ export function PasswordCard() {
             setMsgType(null);
           }
         }}
-        title={t("settings.passwordReset")}
+        title={t("settings.passwordTitle")}
         description={t("settings.changePasswordDescription")}
         className="sm:max-w-xl"
       >
diff --git a/src/components/settings/report-selection/report-visit-offer.tsx b/src/components/settings/report-selection/report-visit-offer.tsx
index b31708730..d9f70ce5f 100644
--- a/src/components/settings/report-selection/report-visit-offer.tsx
+++ b/src/components/settings/report-selection/report-visit-offer.tsx
@@ -74,8 +74,11 @@ export function ReportVisitOffer({
       data-slot="report-visit-offer"
       className="border-border flex flex-wrap items-center gap-2 rounded-lg border p-3"
     >
-      {/* Content, not meta: it is the offer, and it names its own source. */}
-      <p className="text-foreground flex min-w-0 flex-1 items-center gap-2 text-sm">
+      {/* Content, not meta: it is the offer, and it names its own source. On
+          a phone the sentence takes the full row and the two buttons wrap
+          below it; with a zero basis it was squeezed into a one-word column
+          beside them. */}
+      <p className="text-foreground flex min-w-0 flex-1 basis-full items-center gap-2 text-sm sm:basis-0">
         <CalendarClock className="size-4 shrink-0" aria-hidden />
         <span>
           {t("settings.healthRecord.visitOffer", {
@@ -88,7 +91,7 @@ export function ReportVisitOffer({
         type="button"
         variant="outline"
         size="sm"
-        className="min-h-11 sm:min-h-9"
+        className="ml-auto min-h-11 sm:ml-0 sm:min-h-9"
         data-slot="report-visit-offer-apply"
         onClick={() => onUseVisitDate(localDay(next.occurredAt))}
       >
diff --git a/src/components/settings/report-selection/selection-panel.tsx b/src/components/settings/report-selection/selection-panel.tsx
index 12bf71c42..e0c74295f 100644
--- a/src/components/settings/report-selection/selection-panel.tsx
+++ b/src/components/settings/report-selection/selection-panel.tsx
@@ -261,7 +261,7 @@ export function HealthRecordExportPanel() {
         {/* Format + range share a row on desktop; on mobile they stack. */}
         <div className="grid gap-4 sm:grid-cols-2">
           <fieldset className="space-y-1.5">
-            <legend className="mb-1 text-sm font-medium">
+            <legend className="pl-1 text-sm leading-none font-medium after:content-[':']">
               {t("settings.healthRecord.format")}
             </legend>
             <div className="flex flex-wrap gap-2" role="radiogroup">
diff --git a/src/components/settings/thresholds-editor-section.tsx b/src/components/settings/thresholds-editor-section.tsx
index 8a50c0fb8..6e857bc5a 100644
--- a/src/components/settings/thresholds-editor-section.tsx
+++ b/src/components/settings/thresholds-editor-section.tsx
@@ -142,7 +142,7 @@ export function ThresholdsEditorSection({ id }: { id: string }) {
           at all. The page subtitle is the one that goes. */}
       <SettingsCardHeader
         icon={SlidersHorizontal}
-        title={t("settings.sections.thresholds.title")}
+        title={t("thresholds.cardTitle")}
       />
 
       {isLoading || !data ? (
@@ -307,6 +307,13 @@ function MetricRow({
     minNum < maxNum;
 
   const defaultRange = effective?.default;
+  // A bound reads at its own precision: "120–129 mmHg", "8,000–15,000 steps",
+  // "61.3–82.5 kg". A fixed one decimal printed "120.0–129.0" and
+  // "8,000.0–15,000.0" for metrics that are whole numbers by nature.
+  const formatBound = (value: number) => {
+    const rounded = Math.round(value * 10) / 10;
+    return fmt.number(rounded, Number.isInteger(rounded) ? 0 : 1);
+  };
 
   return (
     <div className="border-border space-y-3 rounded-lg border p-4">
@@ -315,7 +322,7 @@ function MetricRow({
           <p className="text-sm font-medium">{t(METRIC_LABEL_KEYS[metric])}</p>
           <p className="text-muted-foreground text-xs">
             {defaultRange
-              ? `${t("thresholds.defaultLabel")}: ${fmt.number(units.toDisplay(defaultRange.greenMin), 1)}–${fmt.number(units.toDisplay(defaultRange.greenMax), 1)} ${bounds.unit}`
+              ? `${t("thresholds.defaultLabel")}: ${formatBound(units.toDisplay(defaultRange.greenMin))}–${formatBound(units.toDisplay(defaultRange.greenMax))} ${bounds.unit}`
               : t("thresholds.unsetExplanation")}
           </p>
         </div>