fix(labs): let the conversion badge in the scan review wrap

At 390 px the badge truncated, and the part it cut off was the value the
report printed. It now wraps inside the row like a sentence.

src/components/labs/__tests__/ocr-row-editor.test.tsx

@@ -176,6 +176,18 @@ describe("<OcrRowEditor> unit differs but converts", () => {
     expect(html).not.toContain('aria-invalid="true"');
   });
 
+  it("wraps the sentence instead of cutting off the printed value", () => {
+    const html = render(undefined, "en", converts);
+    const badge =
+      /<span[^>]*data-slot="ocr-row-converted-badge"[^>]*>([\s\S]*?)<\/span><\/span>/.exec(
+        html,
+      );
+    expect(badge).not.toBeNull();
+    const tag = badge![0].slice(0, badge![0].indexOf(">"));
+    expect(tag).toContain("whitespace-normal");
+    expect(badge![0]).not.toContain("truncate");
+  });
+
   it("speaks German too", () => {
     const html = render(undefined, "de", converts);
     expect(html).toContain("umgerechnet aus 5,6 mmol/L");

src/components/labs/ocr-row-editor.tsx

@@ -191,11 +191,13 @@ export function OcrRowEditor({
               {conversion ? (
                 <Badge
                   variant="outline"
-                  className="max-w-full"
+                  // Wraps rather than truncates: the printed value is the end
+                  // of the sentence, exactly what a cut at 390 px would hide.
+                  className="h-auto max-w-full justify-start rounded-md text-left whitespace-normal"
                   data-slot="ocr-row-converted-badge"
                 >
                   <Ruler aria-hidden />
-                  <span className="truncate">
+                  <span className="min-w-0 break-words">
                     {t("labs.ocr.unitConvertedBadge", {
                       value: labNumber(conversion.value),
                       markerUnit: conversion.unit,