feat: add mobile card view to AcmeTab

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/(dashboard)/certificates/components/AcmeTab.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Chip, Typography } from "@mui/material";
+import { Card, Chip, Stack, Typography } from "@mui/material";
 import { DataTable } from "@/src/components/ui/DataTable";
 import type { AcmeHost, CertExpiryStatus } from "../page";
 import { RelativeTime } from "./RelativeTime";
@@ -54,6 +54,23 @@ const columns = [
   },
 ];
 
+function acmeMobileCard(r: AcmeHost) {
+  return (
+    <Card variant="outlined" sx={{ p: 2 }}>
+      <Stack spacing={0.5}>
+        <Typography variant="subtitle2" fontWeight={700}>{r.name}</Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ fontSize: "0.75rem" }}>
+          {r.domains.join(", ")}
+        </Typography>
+        <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap">
+          <RelativeTime validTo={r.certValidTo} status={r.certExpiryStatus} />
+          <Chip label={r.enabled ? "Active" : "Disabled"} color={r.enabled ? "success" : "default"} size="small" />
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}
+
 export function AcmeTab({ acmeHosts, acmePagination, search, statusFilter }: Props) {
   const filtered = acmeHosts.filter((h) => {
     if (statusFilter && h.certExpiryStatus !== statusFilter) return false;
@@ -80,6 +97,7 @@ export function AcmeTab({ acmeHosts, acmePagination, search, statusFilter }: Pro
       keyField="id"
       emptyMessage="No ACME certificates match"
       pagination={pagination}
+      mobileCard={acmeMobileCard}
     />
   );
 }