mobile responsive

components/ui/button.tsx

@@ -27,7 +27,7 @@ export function Button({
   return (
     <button
       className={cn(
-        "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors outline-none",
+        "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-colors outline-none",
         "focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:pointer-events-none",
         variants[variant],
         sizes[size],

components/ui/clamp.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const LINES = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+} as const;
+
+/**
+ * Clamp — a dynamic label (a quiz title, a name, an email, a link) cut off
+ * with "…" after a set number of lines, with the full text on hover.
+ *
+ * Use this rather than Tailwind's `truncate` for anything user- or content-
+ * supplied. `truncate` forbids wrapping, and inside a table cell that makes
+ * the column grow to the text's full width — the table then overflows its
+ * card instead of truncating. A line clamp wraps first and cuts after N
+ * lines, and `overflow-wrap: anywhere` lets even an unbroken string (a URL,
+ * a handle) break, so it can never widen whatever it sits in.
+ */
+export function Clamp({
+  children,
+  lines = 1,
+  title,
+  className,
+}: {
+  children: React.ReactNode;
+  lines?: keyof typeof LINES;
+  /** Hover text; defaults to the label itself when it's plain text. */
+  title?: string;
+  className?: string;
+}) {
+  const hover =
+    title ??
+    (typeof children === "string" || typeof children === "number"
+      ? String(children)
+      : undefined);
+  return (
+    <span
+      title={hover}
+      className={cn(
+        "block min-w-0 [overflow-wrap:anywhere]",
+        LINES[lines],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

components/ui/modal.tsx

@@ -41,7 +41,12 @@ export function Modal({
         onClick={(e) => e.stopPropagation()}
       >
         <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>
+          <h2
+            title={title}
+            className="min-w-0 truncate text-base font-semibold text-foreground"
+          >
+            {title}
+          </h2>
           <Button
             variant="ghost"
             size="sm"
@@ -52,7 +57,7 @@ export function Modal({
             <X className="size-4" />
           </Button>
         </div>
-        <div className="min-h-0 overflow-y-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-5">
+        <div className="min-h-0 overflow-y-auto [overflow-wrap:anywhere] px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-5">
           {children}
         </div>
       </div>

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,
       )}
     >