fix(admin): make api-tokens table responsive on mobile

The `/admin/api-tokens` table rendered six full-width columns at every
breakpoint. On Pixel-5-class viewports (360 CSS px) the row exceeded
the card and forced the document itself to scroll horizontally — a
clear violation of the v1.4.x mobile-viewport contract guarded by
`e2e/mobile-viewport.spec.ts`.

Hide three lower-priority columns at narrow widths and surface the
hidden user inline so no information is lost:

- User column: `hidden sm:table-cell` (resurfaces ≥640px). On mobile
  the username paints under the token name as a small secondary line.
- Last-used column: `hidden md:table-cell` (resurfaces ≥768px).
- Created column: `hidden md:table-cell`.
- Card padding shrinks from `p-6` → `p-4 sm:p-6` to claw back 16 CSS
  px on each side at mobile widths.

The `<div className="overflow-x-auto">` wrapper stays as a
belt-and-suspenders guard for ultra-narrow viewports where even the
trimmed three-column layout might overflow (very long permission lists
or long token names). Without it the table would push the card itself
wider than the viewport.

Add `api-token-overview-responsive.test.tsx` to lock the contract:
the user / last-used / created columns must keep their
`hidden + (sm|md):table-cell` classes, the inline mobile fallback
span (`sm:hidden`) must duplicate the username so hiding the column
doesn't drop data, and the card root must keep the responsive
`p-4 sm:p-6` padding.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/app/page.tsx

@@ -10,7 +10,6 @@ import {
   Heart,
   Moon,
   Percent,
-  Pill,
   Plus,
   Smile,
   Target,
@@ -57,6 +56,13 @@ const MoodChart = dynamic(
     })),
   { ssr: false },
 );
+const MedicationComplianceChart = dynamic(
+  () =>
+    import("@/components/charts/medication-compliance-chart").then((mod) => ({
+      default: mod.MedicationComplianceChart,
+    })),
+  { ssr: false },
+);
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
 import { queryKeys } from "@/lib/query-keys";
 import type { DataSummary } from "@/lib/analytics/trends";
@@ -863,25 +869,15 @@ export default function DashboardPage() {
           });
         }
         if (showMedicationsCard) {
+          // v1.4.15 Fix 2: the toggle existed since v1.1 but the dashboard
+          // slot only rendered a static placeholder (icon + title), so
+          // flipping the layout switch on did nothing visible. Wire the
+          // real chart that consumes
+          // `/api/medications/intake?scope=compliance&days=N`.
           charts.push({
             id: "medications",
             order: widgetOrder("medications"),
-            node: (
-              <div
-                key="medications"
-                className="bg-card rounded-xl border p-4 md:p-6"
-              >
-                <div className="mb-3 flex items-center gap-2">
-                  <Pill className="h-4 w-4" />
-                  <h3 className="text-sm font-medium">
-                    {t("dashboard.medications")}
-                  </h3>
-                </div>
-                <p className="text-muted-foreground text-xs">
-                  {t("medications.title") ?? ""}
-                </p>
-              </div>
-            ),
+            node: <MedicationComplianceChart key="medications" />,
           });
         }