mobile responsive

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">
-      <table className="w-full border-collapse text-sm">{children}</table>
+    <div className="rounded-xl border border-border bg-card md:overflow-x-auto md:overscroll-x-contain">
+      <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>
+  );
 }