From a04e119cace08db43396362eacd331b29677d4cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 16:26:26 +0200
Subject: [PATCH] fix(settings): pair date-of-birth with language in one grid
 row

Moves the language select into the same `grid sm:grid-cols-2` row as
date of birth and drops the standalone language wrapper plus its
`sm:max-w-xs` clamp. The profile form now carries a uniform two-cell
rhythm from top to bottom instead of alternating between paired and
single-cell rows. Updates the mobile-consistency e2e assertion to match
the new contract: dob + language MUST share a grid row.
---
 e2e/settings-mobile-consistency.spec.ts     | 13 +++---
 src/components/settings/account-section.tsx | 50 ++++++++++-----------
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/e2e/settings-mobile-consistency.spec.ts b/e2e/settings-mobile-consistency.spec.ts
index f449677aa..008be4067 100644
--- a/e2e/settings-mobile-consistency.spec.ts
+++ b/e2e/settings-mobile-consistency.spec.ts
@@ -115,15 +115,16 @@ test.describe("Settings mobile consistency (Pixel 5)", () => {
     }
   });
 
-  test("/settings/account: Sprache select is in its own row, not paired with date-of-birth", async ({
+  test("/settings/account: Sprache select shares one grid row with date-of-birth", async ({
     page,
   }) => {
     await page.goto("/settings/account", { waitUntil: "networkidle" });
     await page.waitForLoadState("networkidle");
 
-    // The Sprache native select must NOT live inside the same `grid`
-    // ancestor as the date-of-birth input. Pre-fix they shared
-    // `<div class="grid sm:grid-cols-2"> dob | language </div>`.
+    // The v1.4.27 R1 settings audit pairs date-of-birth with language
+    // in a single `grid sm:grid-cols-2` row so the profile form keeps
+    // a uniform two-column rhythm and the language field no longer
+    // sits alone at the bottom with a `sm:max-w-xs` clamp.
     const sharedGrid = await page.evaluate(() => {
       const lang = document.getElementById("language-select");
       const dob = document.getElementById("dob");
@@ -137,8 +138,8 @@ test.describe("Settings mobile consistency (Pixel 5)", () => {
     });
 
     expect(sharedGrid.found, "language + dob fields must exist").toBe(true);
-    expect(sharedGrid.sharedGrid, "language + dob must NOT share a grid").toBe(
-      false,
+    expect(sharedGrid.sharedGrid, "language + dob must share a grid").toBe(
+      true,
     );
   });
 
diff --git a/src/components/settings/account-section.tsx b/src/components/settings/account-section.tsx
index 37ab2484b..ce5fc0679 100644
--- a/src/components/settings/account-section.tsx
+++ b/src/components/settings/account-section.tsx
@@ -402,13 +402,12 @@ export function AccountSection() {
             </div>
           </div>
 
-          {/* Date of birth pairs with the height/gender block above —
-              all three are "biological profile" data the app uses for
-              BMI + BP target calculations. Language is handled as its
-              own row below: it's a UI preference (cookie-backed),
-              not a profile attribute, so v1.4.19 A6 lifted it out of
-              the dob/language pair where users mistook it for a
-              per-account locale setting. */}
+          {/* Date of birth + language share one paired grid row so the
+              profile form keeps a single rhythm (every row two cells
+              wide on sm+). Date of birth is the bottom of the
+              biological-profile block; language is the only UI
+              preference on this card. They sit together to close the
+              "single-cell row" gap that broke the form's grid. */}
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="dob">{t("settings.dateOfBirth")}</Label>
@@ -422,29 +421,28 @@ export function AccountSection() {
                 {t("settings.dateOfBirthHint")}
               </p>
             </div>
+            <div className="space-y-2">
+              <Label htmlFor="language-select">{t("settings.language")}</Label>
+              <select
+                id="language-select"
+                value={locale}
+                onChange={(e) => setLocale(e.target.value as Locale)}
+                className={NATIVE_SELECT_CLASS}
+              >
+                {locales.map((loc) => (
+                  <option key={loc} value={loc}>
+                    {localeLabels[loc as Locale]}
+                  </option>
+                ))}
+              </select>
+              <p className="text-muted-foreground text-xs">
+                {t("settings.languageDescription")}
+              </p>
+            </div>
           </div>
 
           <TimezonePicker value={timezone} onChange={setTimezone} />
 
-          <div className="space-y-2">
-            <Label htmlFor="language-select">{t("settings.language")}</Label>
-            <select
-              id="language-select"
-              value={locale}
-              onChange={(e) => setLocale(e.target.value as Locale)}
-              className={`${NATIVE_SELECT_CLASS} sm:max-w-xs`}
-            >
-              {locales.map((loc) => (
-                <option key={loc} value={loc}>
-                  {localeLabels[loc as Locale]}
-                </option>
-              ))}
-            </select>
-            <p className="text-muted-foreground text-xs">
-              {t("settings.languageDescription")}
-            </p>
-          </div>
-
           {saveMsg && (
             <p
               role="alert"