fix(charts): keep axis unit labels on one line; 44 px date and time triggers

Recharts word-wraps a tick label that it measures wider than its axis,
and it measures in the page's body font rather than the tick's 11 px.
"62 bpm" on the pulse chart under a workout and "106 mg/dL" on the
glucose page therefore broke onto two lines at every width, and the
pulse chart's second line sat on the first x tick. Axis units are now
joined with a no-break space through `axisUnitSuffix`, so the label is
one word and stays on one line. A guard fails when a chart axis joins a
unit with a plain space.

The calendar and clock buttons in the date and time fields paint at
32 px; a `::before` halo now gives them a 44 px touch target without
changing the field.

src/components/ui/__tests__/date-field.test.tsx

@@ -93,6 +93,19 @@ describe("<DateField>", () => {
     expect(html).toContain("sm:h-10");
   });
 
+  it("gives the calendar button a 44 px touch target at its 32 px size", () => {
+    const html = render(<DateField value="2026-02-19" />);
+    const button = /<button[^>]*aria-label="Open date picker"[^>]*>/.exec(
+      html,
+    )?.[0];
+    expect(button).toBeDefined();
+    // Painted size unchanged; the ::before halo adds 6 px per edge.
+    expect(button).toContain("h-8 w-8");
+    expect(button).toContain("relative");
+    expect(button).toContain("before:-inset-1.5");
+    expect(button).toContain("before:absolute");
+  });
+
   it("exposes a labelled calendar picker affordance", () => {
     const html = render(<DateField value="2026-02-19" />);
     expect(html).toContain('aria-label="Open date picker"');

src/components/ui/__tests__/time-field.test.tsx

@@ -105,6 +105,18 @@ describe("formatHhmm", () => {
 });
 
 describe("<TimeField> SSR", () => {
+  it("gives the clock button a 44 px touch target at its 32 px size", () => {
+    const html = render(<TimeField value="14:05" />, "de");
+    const button = /<button[^>]*data-slot="time-field-trigger"[^>]*>/.exec(
+      html,
+    )?.[0];
+    expect(button).toBeDefined();
+    expect(button).toContain("h-8 w-8");
+    expect(button).toContain("relative");
+    expect(button).toContain("before:-inset-1.5");
+    expect(button).toContain("before:absolute");
+  });
+
   it("paints the value in 24h under the de AUTO locale and exposes the picker affordance", () => {
     const html = render(<TimeField value="14:05" />, "de");
     expect(html).toContain('value="14:05"');

src/components/ui/date-field.tsx

@@ -225,7 +225,9 @@ export const DateField = React.forwardRef<HTMLInputElement, DateFieldProps>(
               type="button"
               disabled={disabled}
               aria-label={t("common.openDatePicker")}
-              className="text-muted-foreground hover:text-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-md disabled:cursor-not-allowed disabled:opacity-50"
+              // The button paints at 32 px; the `::before` halo (6 px per edge)
+              // makes the touch target 44 px without changing the field.
+              className="text-muted-foreground hover:text-foreground relative flex h-8 w-8 shrink-0 items-center justify-center rounded-md before:absolute before:-inset-1.5 before:content-[''] disabled:cursor-not-allowed disabled:opacity-50"
             >
               <CalendarIcon className="h-4 w-4" aria-hidden="true" />
             </button>

src/components/ui/time-field.tsx

@@ -189,7 +189,9 @@ export const TimeField = React.forwardRef<HTMLInputElement, TimeFieldProps>(
               tabIndex={-1}
               disabled={disabled}
               aria-label={t("common.openTimePicker")}
-              className="text-muted-foreground hover:text-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-md disabled:cursor-not-allowed disabled:opacity-50"
+              // The button paints at 32 px; the `::before` halo (6 px per edge)
+              // makes the touch target 44 px without changing the field.
+              className="text-muted-foreground hover:text-foreground relative flex h-8 w-8 shrink-0 items-center justify-center rounded-md before:absolute before:-inset-1.5 before:content-[''] disabled:cursor-not-allowed disabled:opacity-50"
               data-slot="time-field-trigger"
             >
               <Clock className="h-4 w-4" aria-hidden="true" />