mobile responsive

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

@@ -12,6 +12,7 @@ import { cn } from "@/lib/utils";
 import { QuizEditor } from "../quiz-editor";
 import { KIND_LABEL } from "../labels";
 import { Participants, Responses } from "./results";
+import { Clamp } from "@/components/ui/clamp";
 
 type Tab = "edit" | "participants" | "responses";
 
@@ -105,7 +106,7 @@ export default function QuizDetailPage() {
   return (
     <div className="space-y-6">
       <header className="flex flex-wrap items-start justify-between gap-4">
-        <div>
+        <div className="min-w-0 flex-1 basis-64">
           <Link
             href="/quizzes"
             className="text-xs text-muted-foreground hover:text-foreground"
@@ -113,9 +114,15 @@ export default function QuizDetailPage() {
             ← Quizzes
           </Link>
           <h1 className="mt-1 text-xl font-semibold text-foreground">
-            {quiz.title}
+            <Clamp lines={2}>{quiz.title}</Clamp>
           </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
+          <Clamp
+            lines={2}
+            className="mt-1 text-sm text-muted-foreground"
+            title={[quiz.target_title, quiz.target_path]
+              .filter(Boolean)
+              .join(" — ")}
+          >
             {KIND_LABEL[quiz.target_kind]}
             {quiz.target_title && ` · ${quiz.target_title}`}
             {quiz.target_path && (
@@ -123,9 +130,9 @@ export default function QuizDetailPage() {
                 ({quiz.target_path})
               </span>
             )}
-          </p>
+          </Clamp>
         </div>
-        <div className="flex gap-2">
+        <div className="flex shrink-0 gap-2">
           <Can perm="quizzes:write">
             <Button
               variant={quiz.published_at ? "outline" : "primary"}

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