fix(ui): conform the wellbeing card and fill lone grid items full-width

The mental-wellbeing instrument card carried a font-medium title and a
gap-4 body, drifting from the medication card it should mirror; bring its
title to text-lg font-semibold and its body to the shared space-y-3.5
rhythm.

Several insight grids left a lone trailing tile stranded at half width
with an empty column beside it. Gate each multi-column grid on having
more than one item so a single tile spans the full row, and give the
fixed five-card mood-correlation grid a trailing-card span so it no
longer orphans on the two-up breakpoint.

Add a little bottom breathing room to the device-score tile so its
rolling-average line no longer reads flush against the card edge.

src/components/labs/lab-list.tsx

@@ -15,6 +15,7 @@ import { formatDate } from "@/lib/format";
 import { formatReferenceRange } from "@/lib/labs/reference-range";
 import { formatLabReading, formatLabValue } from "@/lib/labs/format-value";
 import { useTranslations } from "@/lib/i18n/context";
+import { cn } from "@/lib/utils";
 import { queryKeys } from "@/lib/query-keys";
 import { applyOrder, useModuleListPrefs } from "@/lib/module-list-prefs";
 
@@ -247,7 +248,14 @@ export function LabList({ onAddFirst }: { onAddFirst?: () => void } = {}) {
   // the line-1 chip, the panel as the category badge. v1.18.10 (#3) — no delete
   // control on the tile; the trash icon lives only on the value detail view.
   return (
-    <ul className="grid list-none gap-4 p-0 sm:grid-cols-2">
+    <ul
+      className={cn(
+        "grid list-none gap-4 p-0",
+        // A lone lab spans the full row rather than orphaning half of it;
+        // two or more fall into the two-up grid.
+        groups.length > 1 && "sm:grid-cols-2",
+      )}
+    >
       {truncated ? (
         <li className="sm:col-span-2">
           <p className="text-muted-foreground text-xs">