krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile responsive

Browse Source
This commit is contained in:
gosangam
2026-10-15 22:29:17 +05:30
parent 5832125ab2
commit 09dc734613
1 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/quizzes/quizzes-list.tsx
+13 -9
View File
@@ -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",
)}
>