mobile responsive

app/(app)/quizzes/quizzes-list.tsx

@@ -67,7 +67,9 @@ export function QuizzesList() {
       </header>
 
       {user && (
-        <div className="mb-4 flex gap-1">
+        // Phones: three equal, thumb-sized tabs across the width. From sm up
+        // they shrink back to compact pills.
+        <div className="mb-4 grid grid-cols-3 gap-1.5 sm:flex sm:gap-1">
           {(
             [
               ["all", "All"],
@@ -80,10 +82,10 @@ export function QuizzesList() {
               type="button"
               onClick={() => setFilter(k)}
               className={cn(
-                "rounded-full px-3 py-1 text-sm transition-colors",
+                "min-h-10 rounded-full px-4 py-2 text-[15px] font-medium transition-colors sm:min-h-0 sm:px-3 sm:py-1 sm:text-sm sm:font-normal",
                 filter === k
                   ? "bg-primary text-primary-foreground dark:text-white"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  : "bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground sm:bg-transparent",
               )}
             >
               {label}
@@ -101,19 +103,21 @@ export function QuizzesList() {
             : "Nothing here."}
         </p>
       ) : (
-        <ul className="grid gap-3 sm:grid-cols-2">
+        // minmax(0,1fr) + min-w-0: grid items otherwise refuse to shrink
+        // below their content, so one long word pushes a card off-screen.
+        <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2">
           {shown.map((q) => {
             const done = q.my.state === "completed";
             return (
-              <li key={q.id}>
+              <li key={q.id} className="min-w-0">
                 <Link
                   href={`/quizzes/${q.id}`}
-                  className="flex h-full flex-col rounded-2xl border border-border bg-card p-4 transition-colors hover:border-primary/40 hover:bg-muted/30"
+                  className="flex h-full min-w-0 flex-col rounded-2xl border border-border bg-card p-4 transition-colors hover:border-primary/40 hover:bg-muted/30"
                 >
                   <p className="text-xs font-medium text-primary">
                     {KIND[q.target_kind]}
                   </p>
-                  <p className="mt-1 font-semibold leading-snug text-foreground">
+                  <p className="mt-1 break-words font-semibold leading-snug text-foreground [overflow-wrap:anywhere]">
                     {q.title}
                   </p>
                   {q.target_title && (
@@ -121,14 +125,14 @@ export function QuizzesList() {
                       {q.target_title}
                     </p>
                   )}
-                  <div className="mt-auto flex items-center justify-between gap-2 pt-4 text-xs">
+                  <div className="mt-auto flex flex-wrap items-center justify-between gap-x-3 gap-y-1 pt-4 text-xs">
                     <span className="text-muted-foreground">
                       {q.question_count}{" "}
                       {q.question_count === 1 ? "question" : "questions"}
                     </span>
                     <span
                       className={cn(
-                        "inline-flex items-center gap-1 font-medium",
+                        "inline-flex items-center gap-1 whitespace-nowrap font-medium",
                         done ? "text-muted-foreground" : "text-primary",
                       )}
                     >