mobile responsive

app/(dashboard)/layout.tsx

@@ -3,73 +3,12 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import {
+import { Menu } from "lucide-react";
-  ClipboardCheck,
+import { api, staff, type Me, type StaffMe } from "@/lib/api";
-  Flag,
-  ShieldCheck,
-  Gift,
-  Megaphone,
-  Quote,
-  FolderClosed,
-  LayoutDashboard,
-  LayoutGrid,
-  Link2,
-  LogOut,
-  MessageSquare,
-  Users,
-} from "lucide-react";
-import { api, staff, MANAGE_STAFF, type Me, type StaffMe } from "@/lib/api";
 import { RequirePermission, StaffProvider } from "@/components/staff-context";
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { ConfirmProvider } from "@/components/confirm";
-
+import { NAV, Sidebar } from "./sidebar";
-// Each entry names the permission that unlocks it, so the sidebar only shows
-// what the signed-in role can actually use.
-const NAV = [
-  { href: "/", label: "Overview", icon: LayoutDashboard, perm: "stats:read" },
-  { href: "/users", label: "Users", icon: Users, perm: "users:read" },
-  { href: "/posts", label: "Posts", icon: LayoutGrid, perm: "posts:moderate" },
-  {
-    href: "/collections",
-    label: "Collections",
-    icon: FolderClosed,
-    perm: "collections:read",
-  },
-  {
-    href: "/short-urls",
-    label: "Short URLs",
-    icon: Link2,
-    perm: "short_urls:read",
-  },
-  {
-    href: "/feedback",
-    label: "Feedback",
-    icon: MessageSquare,
-    perm: "feedback:read",
-  },
-  { href: "/reports", label: "Reports", icon: Flag, perm: "reports:read" },
-  {
-    href: "/broadcasts",
-    label: "Announcements",
-    icon: Megaphone,
-    perm: "broadcasts:read",
-  },
-  { href: "/reward-gifts", label: "Gifts", icon: Gift, perm: "rewards:read" },
-  { href: "/vani", label: "Vāṇī of the Day", icon: Quote, perm: "vani:read" },
-  {
-    href: "/quizzes",
-    label: "Quizzes",
-    icon: ClipboardCheck,
-    perm: "quizzes:read",
-  },
-  {
-    href: "/staff",
-    label: "Staff & roles",
-    icon: ShieldCheck,
-    perm: MANAGE_STAFF,
-  },
-];
 
 export default function DashboardLayout({
   children,
@@ -81,6 +20,8 @@ export default function DashboardLayout({
   const [me, setMe] = useState<Me | null>(null);
   const [staffMe, setStaffMe] = useState<StaffMe | null>(null);
   const [checked, setChecked] = useState(false);
+  // Navigation drawer, below lg only.
+  const [navOpen, setNavOpen] = useState(false);
 
   // Staff gate: only an account holding an admin role, and not blocked from
   // the panel, may see the dashboard. /admin/me answers both at once — it 403s
@@ -133,84 +74,59 @@ export default function DashboardLayout({
     );
   }
 
+  const section =
+    NAV.find(
+      (n) =>
+        n.href !== "/" &&
+        (pathname === n.href || pathname.startsWith(n.href + "/")),
+    ) ?? (pathname === "/" ? NAV[0] : undefined);
+
   return (
     <div className="flex min-h-screen">
-      <aside className="flex w-60 shrink-0 flex-col border-r border-border bg-card">
+      <Sidebar
-        <div className="px-5 py-5">
+        me={me}
-          <p className="text-xs uppercase tracking-[0.2em] text-primary">
+        staffMe={staffMe}
-            Prabhupāda Says
+        pathname={pathname}
-          </p>
+        open={navOpen}
-          <p className="mt-0.5 text-sm font-semibold text-foreground">Admin</p>
+        onClose={() => setNavOpen(false)}
-        </div>
+        onSignOut={signOut}
-        <nav className="flex-1 space-y-1 px-3">
+      />
-          {NAV.filter((n) => staffMe.permissions.includes(n.perm)).map(
+
-            ({ href, label, icon: Icon }) => {
+      <div className="flex min-w-0 flex-1 flex-col">
-              const active =
+        {/* Below lg: a top bar with the menu button and where you are. */}
-                pathname === href || pathname.startsWith(href + "/");
+        <header className="sticky top-0 z-30 flex items-center gap-2 border-b border-border bg-card/95 px-2 py-2 backdrop-blur lg:hidden">
-              return (
-                <Link
-                  key={href}
-                  href={href}
-                  className={cn(
-                    "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
-                    active
-                      ? "bg-accent text-accent-foreground font-medium"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                  )}
-                >
-                  <Icon className="size-4" />
-                  {label}
-                </Link>
-              );
-            },
-          )}
-        </nav>
-        <div className="border-t border-border px-3 py-3">
-          <div className="px-3 pb-2 text-xs text-muted-foreground">
-            <p className="truncate font-medium text-foreground">{me.name}</p>
-            <p className="truncate">@{me.handle}</p>
-            <p className="mt-1 inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-              {staffMe.role_name}
-            </p>
-          </div>
           <Button
             variant="ghost"
             size="sm"
-            onClick={signOut}
+            onClick={() => setNavOpen(true)}
-            className="w-full justify-start text-muted-foreground"
+            aria-label="Open menu"
+            className="size-10 px-0"
           >
-            <LogOut className="size-4" />
+            <Menu className="size-5" />
-            Sign out
           </Button>
-        </div>
+          <p className="min-w-0 truncate text-sm font-semibold text-foreground">
-      </aside>
+            {section?.label ?? "Admin"}
+          </p>
+        </header>
 
-      <main className="flex-1 overflow-x-hidden px-6 py-6 lg:px-10">
+        <main className="min-w-0 flex-1 px-4 py-5 sm:px-6 sm:py-6 lg:px-10">
-        <div className="mx-auto max-w-6xl">
+          <div className="mx-auto max-w-6xl">
-          <StaffProvider value={staffMe}>
+            <StaffProvider value={staffMe}>
-            <ConfirmProvider>
+              <ConfirmProvider>
-              {/* The section's own permission, so a URL typed straight in
+                {/* The section's own permission, so a URL typed straight in
                   explains itself instead of failing call by call. */}
-              {(() => {
+                {section ? (
-                const section =
-                  NAV.find(
-                    (n) =>
-                      n.href !== "/" &&
-                      (pathname === n.href ||
-                        pathname.startsWith(n.href + "/")),
-                  ) ?? (pathname === "/" ? NAV[0] : undefined);
-                return section ? (
                   <RequirePermission perm={section.perm}>
                     {children}
                   </RequirePermission>
                 ) : (
                   children
-                );
+                )}
-              })()}
+              </ConfirmProvider>
-            </ConfirmProvider>
+            </StaffProvider>
-          </StaffProvider>
+          </div>
-        </div>
+        </main>
-      </main>
+      </div>
     </div>
   );
 }

app/(dashboard)/quizzes/[id]/results.tsx

@@ -174,7 +174,7 @@ export function Participants({ quizId }: { quizId: string }) {
         {!detail ? (
           <p className="text-sm text-muted-foreground">Loading…</p>
         ) : (
-          <div className="max-h-[60vh] space-y-4 overflow-y-auto pr-1">
+          <div className="space-y-4">
             <p className="text-sm text-muted-foreground">
               {detail.completed_at
                 ? `Scored ${detail.score} of ${detail.total}`

app/(dashboard)/quizzes/page.tsx

@@ -41,8 +41,8 @@ export default function QuizzesPage() {
           </p>
         </div>
         <Can perm="quizzes:write">
-          <Link href="/quizzes/new">
+          <Link href="/quizzes/new" className="shrink-0">
-            <Button>New quiz</Button>
+            <Button className="whitespace-nowrap">New quiz</Button>
           </Link>
         </Can>
       </header>

app/(dashboard)/quizzes/quiz-editor.tsx

@@ -191,6 +191,7 @@ export function QuizEditor({
             <p className="mt-1 text-xs text-muted-foreground">
               Paste the page&apos;s link, e.g. /books/bg/2 or
               /transcriptions/720720sb-london. Leave empty for a stand-alone
+              quiz. Each chapter, lecture or conversation can have only one
               quiz.
             </p>
           </div>
@@ -298,7 +299,7 @@ export function QuizEditor({
                   maxLength={2000}
                   placeholder="Question"
                 />
-                <label className="flex w-fit items-center gap-2 text-sm text-foreground">
+                <label className="flex w-fit flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-foreground">
                   <input
                     type="checkbox"
                     checked={q.multi}
@@ -306,8 +307,8 @@ export function QuizEditor({
                     className="accent-primary"
                   />
                   Multiple correct answers
-                  <span className="text-xs text-muted-foreground">
+                  <span className="basis-full pl-6 text-xs text-muted-foreground sm:basis-auto sm:pl-0">
-                    — users select all that apply
+                    Users select all that apply
                   </span>
                 </label>
                 <fieldset className="space-y-2">

app/(dashboard)/sidebar.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+/**
+ * The dashboard's navigation.
+ *
+ * From lg up it's a fixed column beside the page. Below that it's a drawer
+ * that slides in from the left, opened from the top bar's menu button, so
+ * phones get the full width for the page itself.
+ */
+
+import { useEffect } from "react";
+import Link from "next/link";
+import {
+  ClipboardCheck,
+  Flag,
+  ShieldCheck,
+  Gift,
+  Megaphone,
+  Quote,
+  FolderClosed,
+  LayoutDashboard,
+  LayoutGrid,
+  Link2,
+  LogOut,
+  MessageSquare,
+  Users,
+  X,
+} from "lucide-react";
+import { MANAGE_STAFF, type Me, type StaffMe } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+// Each entry names the permission that unlocks it, so the sidebar only shows
+// what the signed-in role can actually use.
+export const NAV = [
+  { href: "/", label: "Overview", icon: LayoutDashboard, perm: "stats:read" },
+  { href: "/users", label: "Users", icon: Users, perm: "users:read" },
+  { href: "/posts", label: "Posts", icon: LayoutGrid, perm: "posts:moderate" },
+  {
+    href: "/collections",
+    label: "Collections",
+    icon: FolderClosed,
+    perm: "collections:read",
+  },
+  {
+    href: "/short-urls",
+    label: "Short URLs",
+    icon: Link2,
+    perm: "short_urls:read",
+  },
+  {
+    href: "/feedback",
+    label: "Feedback",
+    icon: MessageSquare,
+    perm: "feedback:read",
+  },
+  { href: "/reports", label: "Reports", icon: Flag, perm: "reports:read" },
+  {
+    href: "/broadcasts",
+    label: "Announcements",
+    icon: Megaphone,
+    perm: "broadcasts:read",
+  },
+  { href: "/reward-gifts", label: "Gifts", icon: Gift, perm: "rewards:read" },
+  { href: "/vani", label: "Vāṇī of the Day", icon: Quote, perm: "vani:read" },
+  {
+    href: "/quizzes",
+    label: "Quizzes",
+    icon: ClipboardCheck,
+    perm: "quizzes:read",
+  },
+  {
+    href: "/staff",
+    label: "Staff & roles",
+    icon: ShieldCheck,
+    perm: MANAGE_STAFF,
+  },
+];
+
+export function Sidebar({
+  me,
+  staffMe,
+  pathname,
+  open,
+  onClose,
+  onSignOut,
+}: {
+  me: Me;
+  staffMe: StaffMe;
+  pathname: string;
+  /** Drawer state below lg; ignored from lg up, where it's always shown. */
+  open: boolean;
+  onClose: () => void;
+  onSignOut: () => void;
+}) {
+  // While the drawer is open: Escape closes it and the page behind it
+  // doesn't scroll.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    document.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  return (
+    <>
+      {/* Backdrop — drawer only. */}
+      <div
+        aria-hidden
+        onClick={onClose}
+        className={cn(
+          "fixed inset-0 z-40 bg-black/40 transition-opacity lg:hidden",
+          open ? "opacity-100" : "pointer-events-none opacity-0",
+        )}
+      />
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] flex-col border-r border-border bg-card transition-transform duration-200",
+          open ? "translate-x-0 shadow-xl" : "-translate-x-full",
+          // lg+: an ordinary column in the page flow.
+          "lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:w-60 lg:translate-x-0 lg:shadow-none",
+        )}
+      >
+        <div className="flex items-start justify-between px-5 py-5">
+          <div>
+            <p className="text-xs uppercase tracking-[0.2em] text-primary">
+              Prabhupāda Says
+            </p>
+            <p className="mt-0.5 text-sm font-semibold text-foreground">
+              Admin
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            aria-label="Close menu"
+            className="-mr-2 size-9 px-0 lg:hidden"
+          >
+            <X className="size-5" />
+          </Button>
+        </div>
+        <nav className="flex-1 space-y-1 overflow-y-auto px-3">
+          {NAV.filter((n) => staffMe.permissions.includes(n.perm)).map(
+            ({ href, label, icon: Icon }) => {
+              const active =
+                pathname === href || pathname.startsWith(href + "/");
+              return (
+                <Link
+                  key={href}
+                  href={href}
+                  // Picking a section closes the drawer on small screens.
+                  onClick={onClose}
+                  className={cn(
+                    "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors lg:py-2",
+                    active
+                      ? "bg-accent text-accent-foreground font-medium"
+                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  )}
+                >
+                  <Icon className="size-4" />
+                  {label}
+                </Link>
+              );
+            },
+          )}
+        </nav>
+        <div className="border-t border-border px-3 py-3">
+          <div className="px-3 pb-2 text-xs text-muted-foreground">
+            <p className="truncate font-medium text-foreground">{me.name}</p>
+            <p className="truncate">@{me.handle}</p>
+            <p className="mt-1 inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+              {staffMe.role_name}
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onSignOut}
+            className="w-full justify-start text-muted-foreground"
+          >
+            <LogOut className="size-4" />
+            Sign out
+          </Button>
+        </div>
+      </aside>
+    </>
+  );
+}

app/(dashboard)/vani/page.tsx

@@ -145,19 +145,19 @@ export default function VaniPage() {
 
       <Can perm="vani:write">
         <section className="space-y-3 rounded-xl border border-border p-4">
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
             <input
               value={link}
               onChange={(e) => setLink(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && void pinByLink()}
               placeholder="Paste a link — /transcriptions/720720sb-london"
-              className={`${field} min-w-0 flex-1`}
+              className={`${field} w-full min-w-0 sm:flex-1`}
             />
             <button
               type="button"
               disabled={busy || !link.trim()}
               onClick={pinByLink}
-              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+              className="shrink-0 whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
             >
               Use this link
             </button>
@@ -167,22 +167,22 @@ export default function VaniPage() {
             link when you know exactly which item you want.
           </p>
 
-          <div className="flex flex-wrap items-center gap-3 border-t border-border pt-3">
+          <div className="flex flex-col gap-3 border-t border-border pt-3 sm:flex-row sm:items-center">
-            <label className="text-sm text-muted-foreground">
+            <label className="flex items-center text-sm text-muted-foreground">
               Date
               <input
                 type="date"
                 value={day}
                 min={todayUTC()}
                 onChange={(e) => setDay(e.target.value)}
-                className={`${field} ml-2`}
+                className={`${field} ml-2 min-w-0 flex-1 sm:flex-none`}
               />
             </label>
             <input
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search verses, chapters and lectures"
-              className={`${field} min-w-0 flex-1`}
+              className={`${field} w-full min-w-0 sm:flex-1`}
             />
           </div>
 

components/list-shell.tsx

@@ -48,7 +48,7 @@ export function ListShell({
   return (
     <div className="space-y-5">
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <h1 className="text-2xl font-semibold text-foreground">
+        <h1 className="text-xl font-semibold text-foreground sm:text-2xl">
           {title}
           <span className="ml-2 text-sm font-normal text-muted-foreground">
             {total.toLocaleString()}
@@ -58,7 +58,7 @@ export function ListShell({
       </div>
 
       {onQueryChange ? (
-        <div className="relative max-w-md">
+        <div className="relative w-full sm:max-w-md">
           <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={raw}
@@ -77,7 +77,7 @@ export function ListShell({
         {children}
       </div>
 
-      <div className="flex items-center justify-between text-sm text-muted-foreground">
+      <div className="flex flex-wrap items-center justify-between gap-2 text-sm text-muted-foreground">
         <span>
           Page {list.page} of {list.totalPages}
           {list.loading ? " · loading…" : ""}

components/ui/menu.tsx

@@ -10,6 +10,12 @@ export type MenuItem = {
   destructive?: boolean;
 };
 
+
+// Menu geometry, for keeping it on screen: w-44, rows of py-2 text-sm.
+const MENU_WIDTH = 176;
+const MENU_ROW = 36;
+const MENU_GAP = 8;
+
 /**
  * A kebab (⋯) trigger with a small dropdown of actions — keeps secondary /
  * destructive row actions hidden until opened. The menu is fixed-positioned
@@ -50,7 +56,21 @@ export function RowMenu({ items }: { items: MenuItem[] }) {
   function toggle() {
     if (!open && btnRef.current) {
       const r = btnRef.current.getBoundingClientRect();
-      setPos({ top: r.bottom + 4, right: window.innerWidth - r.right });
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      // Right-aligned to the button, but kept on screen: on a phone the
+      // button can sit at the left of a card, where a right-aligned menu
+      // would hang off the edge. Near the bottom it opens upwards instead.
+      const right = Math.max(
+        MENU_GAP,
+        Math.min(vw - r.right, vw - MENU_WIDTH - MENU_GAP),
+      );
+      const height = items.length * MENU_ROW + 8;
+      const top =
+        r.bottom + 4 + height > vh - MENU_GAP
+          ? Math.max(MENU_GAP, r.top - 4 - height)
+          : r.bottom + 4;
+      setPos({ top, right });
     }
     setOpen((v) => !v);
   }

components/ui/modal.tsx

@@ -4,7 +4,11 @@ import * as React from "react";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
-/** A minimal centered modal dialog. Closes on overlay click and Escape. */
+/**
+ * A minimal modal dialog. Closes on overlay click and Escape. Centred from sm
+ * up; on a phone it rises from the bottom as a full-width sheet. Either way
+ * it never outgrows the screen — the body scrolls inside it.
+ */
 export function Modal({
   open,
   onClose,
@@ -29,14 +33,14 @@ export function Modal({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 sm:items-center sm:p-4"
       onClick={onClose}
     >
       <div
-        className="w-full max-w-lg rounded-2xl border border-border bg-card shadow-xl"
+        className="flex max-h-[92dvh] w-full max-w-lg flex-col rounded-t-2xl border border-border bg-card shadow-xl sm:max-h-[85dvh] sm:rounded-2xl"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+        <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3.5 sm:px-5 sm:py-4">
           <h2 className="text-base font-semibold text-foreground">{title}</h2>
           <Button
             variant="ghost"
@@ -48,7 +52,9 @@ export function Modal({
             <X className="size-4" />
           </Button>
         </div>
-        <div className="px-5 py-4">{children}</div>
+        <div className="min-h-0 overflow-y-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-5">
+          {children}
+        </div>
       </div>
     </div>
   );

components/ui/table.tsx

@@ -1,17 +1,58 @@
+"use client";
+
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
+/**
+ * The panel's data table.
+ *
+ * From md up it's an ordinary table. Below xl, long values (emails, URLs)
+ * may wrap anywhere so the columns fit a tablet; if they still can't, the
+ * table scrolls sideways inside its card as a last resort.
+ *
+ * On a phone (below md) each row becomes a stacked card: one line per cell, labelled
+ * with its column heading. The labels are read from the table's own <th>s
+ * and stamped onto the cells as `data-label`, so pages need no extra markup
+ * — every table in the panel gets the card layout for free. Cells under an
+ * empty heading (an actions column) simply go unlabelled.
+ */
 export function Table({ children }: { children: React.ReactNode }) {
+  const ref = React.useRef<HTMLTableElement>(null);
+
+  // Runs after every render: rows arrive and change with the data.
+  React.useLayoutEffect(() => {
+    const table = ref.current;
+    if (!table) return;
+    const heads = Array.from(table.querySelectorAll("thead th")).map(
+      (th) => th.textContent?.trim() ?? "",
+    );
+    table.querySelectorAll("tbody tr").forEach((tr) => {
+      let col = 0;
+      Array.from(tr.children).forEach((cell) => {
+        const td = cell as HTMLTableCellElement;
+        const label = td.colSpan > 1 ? "" : (heads[col] ?? "");
+        if (label) td.dataset.label = label;
+        else delete td.dataset.label;
+        col += td.colSpan || 1;
+      });
+    });
+  });
+
   return (
-    <div className="overflow-x-auto rounded-xl border border-border bg-card">
+    <div className="rounded-xl border border-border bg-card md:overflow-x-auto md:overscroll-x-contain">
-      <table className="w-full border-collapse text-sm">{children}</table>
+      <table
+        ref={ref}
+        className="w-full border-collapse text-sm max-md:block"
+      >
+        {children}
+      </table>
     </div>
   );
 }
 
 export function THead({ children }: { children: React.ReactNode }) {
   return (
-    <thead className="border-b border-border bg-muted/50 text-left text-xs uppercase tracking-wide text-muted-foreground">
+    <thead className="border-b border-border bg-muted/50 text-left text-xs uppercase tracking-wide text-muted-foreground max-md:hidden">
       {children}
     </thead>
   );
@@ -24,7 +65,11 @@ export function TH({
   children?: React.ReactNode;
   className?: string;
 }) {
-  return <th className={cn("px-4 py-3 font-medium", className)}>{children}</th>;
+  return (
+    <th className={cn("whitespace-nowrap px-4 py-3 font-medium", className)}>
+      {children}
+    </th>
+  );
 }
 
 export function TR({
@@ -35,7 +80,14 @@ export function TR({
   className?: string;
 }) {
   return (
-    <tr className={cn("border-b border-border last:border-0 align-top", className)}>
+    <tr
+      className={cn(
+        "border-b border-border last:border-0 align-top",
+        // Phone: a card per row.
+        "max-md:block max-md:px-4 max-md:py-3",
+        className,
+      )}
+    >
       {children}
     </tr>
   );
@@ -48,5 +100,23 @@ export function TD({
   children?: React.ReactNode;
   className?: string;
 }) {
-  return <td className={cn("px-4 py-3 text-foreground", className)}>{children}</td>;
+  return (
+    <td
+      className={cn(
+        "px-4 py-3 text-foreground",
+        // Phone: one labelled block per cell — the label pinned on the left,
+        // the cell's own content flowing beside it exactly as it would in the
+        // table (stacked lines stay stacked). Alignment classes meant for a
+        // column (text-right on actions) give way to the card's flow.
+        "max-md:relative max-md:block max-md:px-0 max-md:py-1.5 max-md:text-left",
+        "max-md:data-label:pl-28",
+        "max-md:data-label:before:absolute max-md:data-label:before:left-0 max-md:data-label:before:top-2 max-md:data-label:before:w-24 max-md:data-label:before:text-[11px] max-md:data-label:before:font-medium max-md:data-label:before:uppercase max-md:data-label:before:leading-4 max-md:data-label:before:tracking-wide max-md:data-label:before:text-muted-foreground max-md:data-label:before:content-[attr(data-label)]",
+        // Long values (emails, URLs) wrap rather than widen the table or card.
+        "max-xl:[overflow-wrap:anywhere]",
+        className,
+      )}
+    >
+      {children}
+    </td>
+  );
 }