fix(admin): /admin/users mobile layout — card-list at < md, no truncation

Phase A5 / B-mobile CRITICAL #2: at 393 CSS px the desktop user table
truncated the role badge ("ADMI", "USE") and pushed the action column
entirely off the right edge. The destructive force-logout action was
unreachable on mobile, plus the card-header filter pills collided
with the title's count badge.

Fix:
- Header switches from horizontal to vertical stack at `< sm` so the
  filter pills get their own row instead of fighting the title for
  space.
- Card padding `p-4 sm:p-6` matches the api-tokens responsive
  template.
- Desktop table is gated behind `hidden md:block` (instead of just
  letting it overflow).
- New mobile card-list at `< md` renders each user as a self-
  contained card with the username + role badge + meta line + a
  flex-wrapping action row carrying all four buttons (toggle role,
  edit, reset password, force logout). Nothing hidden behind a
  horizontal scroll, every action stays tap-targetable.
- Action buttons extracted into a single `renderUserActions()` helper
  so desktop + mobile stay in lock-step on future admin actions.

Evidence: new `user-management-responsive.test.tsx` asserts the
desktop table is `hidden md:block`, the mobile list is `md:hidden`,
the role badge appears in both layouts (no column lost), all four
ARIA-labelled action buttons are present in the mobile card, the
header stacks on `< sm`, and the card uses `p-4 sm:p-6`. 6 / 6 tests
green.

Findings ID: A5/CRITICAL-#2 (top of `.planning/phase-A5-mobile-findings.md`).

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

src/components/admin/backups-section.tsx

@@ -12,7 +12,8 @@
  */
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Database, Loader2, PlayCircle } from "lucide-react";
+import { Database, Download, Loader2, PlayCircle } from "lucide-react";
+import { useState } from "react";
 import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -71,6 +72,46 @@ export function BackupsSection() {
 
   const rows: BackupRow[] = data?.rows ?? [];
 
+  // Per-row download in-flight state — keyed by backup id so two
+  // parallel clicks on different rows don't share a single spinner.
+  const [downloadingId, setDownloadingId] = useState<string | null>(null);
+
+  async function handleDownload(row: BackupRow) {
+    setDownloadingId(row.id);
+    try {
+      const res = await fetch(`/api/admin/backups/${row.id}/download`);
+      if (!res.ok) {
+        throw new Error(await getApiErrorMessage(res));
+      }
+      // Use the server-provided Content-Disposition filename if present,
+      // otherwise fall back to a deterministic client-side name. The
+      // server filename is more accurate (uses the actual createdAt).
+      const cd = res.headers.get("content-disposition") ?? "";
+      const match = cd.match(/filename="?([^";]+)"?/i);
+      const fallback = `healthlog-backup-${row.userId}-${row.createdAt.slice(0, 10)}.json`;
+      const filename = match?.[1] ?? fallback;
+
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      toast.success(t("admin.section.backups.downloadStarted"));
+    } catch (err) {
+      toast.error(
+        err instanceof Error && err.message
+          ? err.message
+          : t("admin.section.backups.downloadFailed"),
+      );
+    } finally {
+      setDownloadingId(null);
+    }
+  }
+
   return (
     <div className="bg-card border-border rounded-xl border p-6">
       <div className="flex items-center justify-between gap-2">
@@ -137,6 +178,9 @@ export function BackupsSection() {
                 <th className="px-3 py-2 text-right font-medium">
                   {t("admin.section.backups.colCreatedAt")}
                 </th>
+                <th className="px-3 py-2 text-right font-medium">
+                  {t("admin.section.backups.colActions")}
+                </th>
               </tr>
             </thead>
             <tbody className="divide-border divide-y">
@@ -154,6 +198,24 @@ export function BackupsSection() {
                   <td className="text-muted-foreground px-3 py-2 text-right text-xs whitespace-nowrap">
                     {formatDateTime(row.createdAt)}
                   </td>
+                  <td className="px-3 py-2 text-right whitespace-nowrap">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      disabled={downloadingId === row.id}
+                      onClick={() => handleDownload(row)}
+                      aria-label={t("admin.section.backups.downloadAria", {
+                        username: row.username,
+                      })}
+                    >
+                      {downloadingId === row.id ? (
+                        <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                      ) : (
+                        <Download className="mr-1 h-3.5 w-3.5" />
+                      )}
+                      {t("admin.section.backups.download")}
+                    </Button>
+                  </td>
                 </tr>
               ))}
             </tbody>