feat(labs): give the lab-scan review stage the width a large screen offers

The review stage is a list of readings to compare and correct, but it sat in
the default 448 px dialog, so with several readings it only grew taller.

- ResponsiveSheet gains an opt-in 6xl width tier (72rem). Nothing else
  changes width; the Sheet branch on phones ignores the tier as before.
- The review stage uses it. The picking stage stays narrow.
- Each row lays out from the width of its container, not the window:
  stacked in a narrow dialog, and once the dialog is wide enough the reading
  sits on the left with its fields on the right.
- The field grid (value, unit, date) is a container of its own, so it takes
  three columns when the fields have room for them, whatever the window
  width. The result-text span follows the same query.
- The dialog-overflow e2e spec covers the review stage at 390, 560, 768,
  1280, 1920 and 3440 px. 560 is wider than a phone's field grid needs but
  below the window sm breakpoint, which is what tells a container query from
  a window one.

Refs #1056

src/components/ui/__tests__/responsive-sheet.test.tsx

@@ -142,6 +142,46 @@ describe("<ResponsiveSheet>", () => {
     expect(html).toContain("pr-3");
   });
 
+  it.each([
+    [undefined, "sm:max-w-md"],
+    ["md", "sm:max-w-md"],
+    ["4xl", "sm:max-w-4xl"],
+    ["6xl", "sm:max-w-6xl"],
+  ] as const)(
+    "maps contentWidth %s to %s on the Dialog branch, and to no other tier",
+    (contentWidth, expected) => {
+      mobile = false;
+      const html = renderToStaticMarkup(
+        <ResponsiveSheet
+          open
+          onOpenChange={() => {}}
+          title="Review"
+          contentWidth={contentWidth}
+        >
+          <p>body</p>
+        </ResponsiveSheet>,
+      );
+      const tiers = html.match(/sm:max-w-(?:md|lg|2xl|3xl|4xl|6xl)/g);
+      expect(tiers).toEqual([expected]);
+    },
+  );
+
+  it("does not apply a width tier on the Sheet branch", () => {
+    mobile = true;
+    const html = renderToStaticMarkup(
+      <ResponsiveSheet
+        open
+        onOpenChange={() => {}}
+        title="Review"
+        contentWidth="6xl"
+      >
+        <p>body</p>
+      </ResponsiveSheet>,
+    );
+    expect(html).not.toContain("sm:max-w-6xl");
+    mobile = false;
+  });
+
   it("renders the bottom Sheet branch on narrow viewports", () => {
     mobile = true;
     const html = renderToStaticMarkup(

src/components/ui/responsive-sheet.tsx

@@ -87,7 +87,7 @@ export interface ResponsiveSheetProps {
    * consumer-passed width silently collide with the hardcoded
    * default, so the width now resolves from this single source.
    */
-  contentWidth?: "md" | "lg" | "2xl" | "3xl" | "4xl";
+  contentWidth?: "md" | "lg" | "2xl" | "3xl" | "4xl" | "6xl";
   children: React.ReactNode;
 }
 
@@ -100,6 +100,7 @@ const CONTENT_WIDTH_CLASS: Record<
   "2xl": "sm:max-w-2xl",
   "3xl": "sm:max-w-3xl",
   "4xl": "sm:max-w-4xl",
+  "6xl": "sm:max-w-6xl",
 };
 
 /**