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