From eabbe3e0323a562c508513408347e98b92994898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Wed, 14 Oct 2026 19:19:44 +0200
Subject: [PATCH] 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.
---
 .../labs/__tests__/ocr-row-editor.test.tsx           | 12 ++++++++++++
 src/components/labs/ocr-row-editor.tsx               |  6 ++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/labs/__tests__/ocr-row-editor.test.tsx b/src/components/labs/__tests__/ocr-row-editor.test.tsx
index aef017711..e28f27093 100644
--- a/src/components/labs/__tests__/ocr-row-editor.test.tsx
+++ b/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");
diff --git a/src/components/labs/ocr-row-editor.tsx b/src/components/labs/ocr-row-editor.tsx
index 338c90a85..221906e5f 100644
--- a/src/components/labs/ocr-row-editor.tsx
+++ b/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,