mobile responsive

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

@@ -29,6 +29,7 @@ import { Table, THead, TH, TR, TD } from "@/components/ui/table";
 import { RichText } from "@/lib/rich-text";
 import { cn, fmtDate } from "@/lib/utils";
 import { fmtMs } from "../labels";
+import { Clamp } from "@/components/ui/clamp";
 
 const errMsg = (err: unknown, fallback: string) =>
   err instanceof AdminError ? err.message : fallback;
@@ -110,7 +111,7 @@ export function Participants({ quizId }: { quizId: string }) {
                 <button
                   type="button"
                   onClick={() => view(p)}
-                  className="flex items-center gap-3 text-left hover:underline"
+                  className="flex min-w-0 max-w-full items-center gap-3 text-left hover:underline"
                 >
                   <Avatar
                     src={p.avatar_url ?? null}
@@ -118,12 +119,10 @@ export function Participants({ quizId }: { quizId: string }) {
                     className="size-8"
                   />
                   <span className="min-w-0">
-                    <span className="block truncate text-sm font-medium">
-                      {p.name}
-                    </span>
-                    <span className="block truncate text-xs text-muted-foreground">
-                      @{p.handle}
-                    </span>
+                    <Clamp className="text-sm font-medium">{p.name}</Clamp>
+                    <Clamp className="text-xs text-muted-foreground">
+                      {`@${p.handle}`}
+                    </Clamp>
                   </span>
                 </button>
               </TD>
@@ -184,7 +183,7 @@ export function Participants({ quizId }: { quizId: string }) {
             {detail.items.map((it, i) => (
               <div key={it.id ?? i} className="space-y-1.5">
                 <div className="flex items-start justify-between gap-3 text-sm">
-                  <p className="font-medium">
+                  <p className="min-w-0 font-medium">
                     {i + 1}. <RichText text={it.prompt} />
                   </p>
                   <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
@@ -251,10 +250,10 @@ export function Responses({ quizId }: { quizId: string }) {
         return (
           <li key={q.id} className="rounded-xl border border-border p-4">
             <div className="flex items-start justify-between gap-4">
-              <p className="text-sm font-medium">
+              <p className="min-w-0 text-sm font-medium">
                 {i + 1}. <RichText text={q.prompt} />
                 {q.multi && (
-                  <span className="ml-2 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                  <span className="ml-2 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground whitespace-nowrap">
                     Multiple answers
                   </span>
                 )}