From 63882bf3ec29fb77a5912f28a3c43884b93eceef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Wed, 14 Oct 2026 18:58:55 +0200
Subject: [PATCH] fix(labs): give the draw date a full-width row

The lab form placed the draw date in the second column of a two-column
grid. DateTimeField sets its date and time halves side by side from sm
up, so the date half was squeezed until a date could only be set
through the calendar. The value and the date now stack in one column,
as in the measurement form, and the date can be typed again.

Refs #1214
---
 .../__tests__/lab-form-date-field.test.tsx    | 56 +++++++++++++++++++
 src/components/labs/lab-form.tsx              |  7 ++-
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/components/labs/__tests__/lab-form-date-field.test.tsx

diff --git a/src/components/labs/__tests__/lab-form-date-field.test.tsx b/src/components/labs/__tests__/lab-form-date-field.test.tsx
new file mode 100644
index 000000000..a392cec34
--- /dev/null
+++ b/src/components/labs/__tests__/lab-form-date-field.test.tsx
@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { I18nProvider } from "@/lib/i18n/context";
+
+/**
+ * #1214 — the lab form's draw date is the same full-width, typeable date
+ * field as the measurement form's timestamp.
+ *
+ * It already was the same component (`DateTimeField`), but it sat in the
+ * second column of a two-column grid, and `DateTimeField` puts its date and
+ * time halves side by side from `sm:` up, so the date half was squeezed until
+ * a date could only be set through the calendar. SSR markup (the suite's
+ * dialect) pins the layout: no two-column grid in the form, the date field is
+ * the shared primitive, and its date half is an editable text input, not a
+ * read-only picker trigger.
+ */
+
+vi.mock("@/lib/api/api-fetch", () => ({
+  apiGet: () => new Promise(() => {}),
+  apiPost: vi.fn(),
+}));
+
+import { LabForm } from "../lab-form";
+
+function render(): string {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <I18nProvider initialLocale="en">
+        <LabForm />
+      </I18nProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("<LabForm> draw date", () => {
+  it("does not halve the date field's width with a second column", () => {
+    expect(render()).not.toMatch(/grid-cols-2/);
+  });
+
+  it("uses the shared date-time field with a typeable date half", () => {
+    const html = render();
+    expect(html).toContain('data-slot="date-time-field"');
+    // The id sits on the date half's hidden mirror; the input a person
+    // types into is the overlay right after it.
+    const field = html.slice(html.indexOf('id="lab-takenAt"'));
+    const overlay = /<input(?![^>]*type="hidden")[^>]*>/.exec(field)?.[0];
+    expect(overlay).toBeDefined();
+    expect(overlay).toContain('type="text"');
+    expect(overlay).not.toMatch(/\s(readonly|disabled)(=|\s|\/?>)/i);
+  });
+});
diff --git a/src/components/labs/lab-form.tsx b/src/components/labs/lab-form.tsx
index 2ae8a105f..e746e94b1 100644
--- a/src/components/labs/lab-form.tsx
+++ b/src/components/labs/lab-form.tsx
@@ -448,7 +448,12 @@ export function LabForm({
           </div>
         </div>
 
-        <div className="grid gap-4 sm:grid-cols-2">
+        {/* One column at every width, as in the measurement form. A second
+            column halved the draw date's cell, and `DateTimeField` sets its
+            date and time halves side by side from `sm:` up, so the date
+            itself was squeezed until it could only be set through the
+            calendar (#1214). */}
+        <div className="grid gap-4">
           <div className="space-y-1.5">
             {resultType === "numeric" ? (
               <>