mobile responsive

components/ui/table.tsx

@@ -6,17 +6,31 @@ 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.
+ * From md up it's an ordinary table. Long values (emails, URLs) may wrap
+ * anywhere so the columns always fit; if they still can't, the table scrolls
+ * sideways inside its card as a last resort. Labels inside cells should use
+ * <Clamp>, never `truncate` (see clamp.tsx for why).
  *
  * 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.
+ *
+ * `card="stacked"` puts each label above its value instead of beside it, so
+ * long content (a feedback message) gets the card's full width.
  */
-export function Table({ children }: { children: React.ReactNode }) {
+type CardLayout = "inline" | "stacked";
+const CardLayoutContext = React.createContext<CardLayout>("inline");
+
+export function Table({
+  children,
+  card = "inline",
+}: {
+  children: React.ReactNode;
+  /** Phone card layout: labels beside values (default) or above them. */
+  card?: CardLayout;
+}) {
   const ref = React.useRef<HTMLTableElement>(null);
 
   // Runs after every render: rows arrive and change with the data.
@@ -39,14 +53,16 @@ export function Table({ children }: { children: React.ReactNode }) {
   });
 
   return (
-    <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>
+    <CardLayoutContext.Provider value={card}>
+      <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>
+    </CardLayoutContext.Provider>
   );
 }
 
@@ -100,6 +116,7 @@ export function TD({
   children?: React.ReactNode;
   className?: string;
 }) {
+  const card = React.useContext(CardLayoutContext);
   return (
     <td
       className={cn(
@@ -109,10 +126,14 @@ export function TD({
         // 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]",
+        card === "inline"
+          ? "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"
+          : // Stacked: the label is its own line above the value.
+            "max-md:py-2 max-md:data-label:before:mb-1 max-md:data-label:before:block",
+        "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 — at every width, so no string can push a column off-screen.
+        "[overflow-wrap:anywhere]",
         className,
       )}
     >