From ce8074ad089c325d6c2d6bff86f16955de07e098 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 20 Oct 2026 13:03:12 +0200
Subject: [PATCH] fix(ui): keep a wrapped label's colon on its last word

The label primitive was an inline flex box, so its ::after colon was a
flex item of its own: when a long field name wrapped in a narrow column,
the colon floated beside the whole text block instead of following the
last word. The label now lays out inline and the colon wraps with the
text. Call sites that set flex themselves keep their own layout.
---
 src/components/ui/__tests__/label.test.tsx | 36 ++++++++++++++++++++++
 src/components/ui/label.tsx                | 13 +++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/__tests__/label.test.tsx

diff --git a/src/components/ui/__tests__/label.test.tsx b/src/components/ui/__tests__/label.test.tsx
new file mode 100644
index 000000000..b2d12d8e7
--- /dev/null
+++ b/src/components/ui/__tests__/label.test.tsx
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { Label } from "../label";
+
+describe("<Label>", () => {
+  it("lays out inline so the colon stays on the last word when it wraps", () => {
+    const html = renderToStaticMarkup(
+      <Label htmlFor="x">Body temperature</Label>,
+    );
+    expect(html).toContain("inline-block");
+    // A flex box turns the ::after colon into a flex item of its own, which
+    // floats beside a wrapped label instead of following its last word.
+    expect(html).not.toMatch(/class="[^"]*\binline-flex\b/);
+    expect(html).toContain("after:content-[&#x27;:&#x27;]");
+  });
+
+  it("drops the colon when asked", () => {
+    const html = renderToStaticMarkup(
+      <Label htmlFor="x" noColon>
+        Note
+      </Label>,
+    );
+    expect(html).toContain('data-no-colon="true"');
+  });
+
+  it("lets a call site take over the layout", () => {
+    const html = renderToStaticMarkup(
+      <Label htmlFor="x" className="flex items-baseline">
+        Weight
+      </Label>,
+    );
+    expect(html).toMatch(/class="[^"]*\bflex\b/);
+    expect(html).not.toContain("inline-block");
+  });
+});
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index ce0b94a66..b0f3d313c 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -5,6 +5,17 @@ import { Label as LabelPrimitive } from "radix-ui";
 
 import { cn } from "@/lib/utils";
 
+/**
+ * Form label. The trailing colon is an `::after` on the label itself; pass
+ * `noColon` where the label is not followed by its field.
+ *
+ * The label is `inline-block`, not `inline-flex`. In a flex box the colon is
+ * a flex item of its own, so a label that wraps (a long German or French
+ * field name in a narrow column) left the colon floating beside the whole
+ * text block instead of after the last word. In inline flow the colon is
+ * glued to the last word and wraps with it. A call site that lays out a name
+ * beside a unit sets `flex` itself and owns the colon there.
+ */
 function Label({
   className,
   noColon = false,
@@ -15,7 +26,7 @@ function Label({
       data-slot="label"
       data-no-colon={noColon}
       className={cn(
-        "inline-flex items-center pl-1 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 after:content-[':'] data-[no-colon=true]:after:content-none",
+        "inline-block pl-1 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 after:content-[':'] data-[no-colon=true]:after:content-none",
         className,
       )}
       {...props}