Make student rows clickable and responsive

Author: Edwin Chan

CENTRAL.md

@@ -33,6 +33,7 @@ Stack: Next.js, NextAuth (Google + dev bypass), Prisma, KaTeX for math, Lucide i
 
 ### Recently landed
 
+- **Clickable, contained Students table** — the admin Students list no longer has a redundant View action column. Each row navigates to the student detail page, while the student name remains a native keyboard-accessible link. Route-specific fixed table sizing prevents desktop horizontal scrolling, and narrower viewports switch to labeled two-column student cards instead of a minimum-width scrolling table (sources: `app/admin/students/page.tsx`, `app/admin/students/student-table-row.tsx`, `app/globals.css`).
 - **Unframed profile summary grid** — the Strongest topics, Recent completions, and Bookmarked sets cards now sit directly in the profile layout without a redundant outer `profile-section` card around their existing individual borders (source: `app/users/[username]/page.tsx`).
 - **Immediate content rendering** — removed the global `AnimeRouteEffects` stagger, analytics card/bar entrance pass, trend-chart drawing animation, page fade, smooth scrolling, FTW result-row fade, and floating confetti motion. Routes and analytics now render at their final state immediately. Anime.js remains only for the shared math loading indicator and typewriter caret; ordinary hover/focus and functional feedback transitions remain (sources: `app/layout.tsx`, `app/admin/analytics/page.tsx`, `app/admin/sets/[id]/analytics/page.tsx`, `app/admin/analytics/trend-chart.tsx`, `app/globals.css`).
 - **Consistent page exits and sidebar state** — page headers and completion states use the shared `PageBackLink` control with one explicit `Back to …` label, one canonical 44 px control size, and a logical parent destination. The Classes landing page now includes its missing `Back to Dashboard` control, and nested class pages link directly back to `/classes`. Detail pages no longer present competing arrow buttons for both Dashboard and their parent collection. Sidebar activation now selects one most-specific segment-aware route, so the signed-in user's `/users/<username>` page highlights only **My Profile**, while another user's profile highlights **Users**. Active links expose `aria-current="page"`; no schema or deploy change is required (sources: `app/page-back-link.tsx`, `lib/sidebar-navigation.ts`, `app/site-sidebar-nav.tsx`).

DBSMO/Projects/dbsmo/Components.md

@@ -72,6 +72,7 @@ This note maps important [[dbsmo]] UI/components to their source files and usage
 
 ## Admin Analytics, Feedback, Audit
 
+- `AdminStudentsPage` in `app/admin/students/page.tsx`: paginated/searchable student performance table. It uses a route-specific fixed table layout without horizontal scrolling at desktop widths and becomes labeled cards on narrower viewports. The action column is omitted; `StudentTableRow` in `app/admin/students/student-table-row.tsx` makes row whitespace navigate while retaining one native student-detail link for keyboard and assistive-technology access.
 - `AnalyticsOverviewPage` in `app/admin/analytics/page.tsx`: server route that builds analytics summary/trend/filter options.
 - `AnalyticsFilters` and local `SearchableSelect` in `app/admin/analytics/filters.tsx`: client filter bar that edits query params and supports searchable dropdowns/date range.
 - Analytics metrics in `app/admin/analytics/page.tsx` and `app/admin/sets/[id]/analytics/page.tsx` render directly at their final widths and values; there is no staggered entrance pass.

app/admin/students/page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Download, ExternalLink, Search, Users } from "lucide-react";
+import { Download, Search, Users } from "lucide-react";
 import { getServerSession } from "next-auth/next";
 import { redirect } from "next/navigation";
 import { prisma } from "@/lib/db";
@@ -9,6 +9,7 @@ import { hasPermission } from "@/lib/permissions";
 import { SearchSuggestInput } from "@/app/search-suggest-input";
 import { isVisibleToStudent } from "@/lib/visibility";
 import { PageBackLink } from "@/app/page-back-link";
+import { StudentTableRow } from "./student-table-row";
 
 export const dynamic = "force-dynamic";
 
@@ -172,7 +173,7 @@ export default async function AdminStudentsPage({
               </div>
               <Users size={20} />
             </div>
-            <div className="table-wrap">
+            <div className="table-wrap students-table-wrap">
               <table className="students-table">
                 <thead>
                   <tr>
@@ -186,35 +187,42 @@ export default async function AdminStudentsPage({
                     <th>Attempts</th>
                     <th>Joined</th>
                     <th>Last active</th>
-                    <th></th>
                   </tr>
                 </thead>
                 <tbody>
-                  {paginatedRows.map((row) => (
-                    <tr key={row.id}>
-                      <td>
-                        <strong>{row.name ?? "—"}</strong>
-                      </td>
-                      <td>{row.email}</td>
-                      <td>{row.group ?? "—"}</td>
-                      <td>{row.performance.attemptedSets}</td>
-                      <td>{row.performance.masteryIndex.toFixed(1)}</td>
-                      <td>{row.performance.bestSetAverage.toFixed(1)}%</td>
-                      <td>{performanceEvidenceLabel(row.performance.evidence)}</td>
-                      <td>{row.attempts.length}</td>
-                      <td>{row.createdAt.toLocaleDateString()}</td>
-                      <td>{row.lastActive ? row.lastActive.toLocaleDateString() : "—"}</td>
-                      <td>
-                        <Link
-                          className="secondary-action compact"
-                          href={`/admin/students/${row.id}`}
-                        >
-                          <ExternalLink size={14} />
-                          View
-                        </Link>
-                      </td>
-                    </tr>
-                  ))}
+                  {paginatedRows.map((row) => {
+                    const href = `/admin/students/${row.id}`;
+                    return (
+                      <StudentTableRow href={href} key={row.id}>
+                        <td data-label="Name">
+                          <Link
+                            aria-label={`Open ${row.name ?? row.email}`}
+                            className="student-row-primary-link"
+                            href={href}
+                          >
+                            {row.name ?? "—"}
+                          </Link>
+                        </td>
+                        <td data-label="Email">{row.email}</td>
+                        <td data-label="Group">{row.group ?? "—"}</td>
+                        <td data-label="Sets">{row.performance.attemptedSets}</td>
+                        <td data-label="Mastery index">
+                          {row.performance.masteryIndex.toFixed(1)}
+                        </td>
+                        <td data-label="Best-set avg">
+                          {row.performance.bestSetAverage.toFixed(1)}%
+                        </td>
+                        <td data-label="Evidence">
+                          {performanceEvidenceLabel(row.performance.evidence)}
+                        </td>
+                        <td data-label="Attempts">{row.attempts.length}</td>
+                        <td data-label="Joined">{row.createdAt.toLocaleDateString()}</td>
+                        <td data-label="Last active">
+                          {row.lastActive ? row.lastActive.toLocaleDateString() : "—"}
+                        </td>
+                      </StudentTableRow>
+                    );
+                  })}
                 </tbody>
               </table>
             </div>

app/admin/students/student-table-row.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import type { MouseEvent, ReactNode } from "react";
+import { useRouter } from "next/navigation";
+
+type StudentTableRowProps = {
+  children: ReactNode;
+  href: string;
+};
+
+export function StudentTableRow({ children, href }: StudentTableRowProps) {
+  const router = useRouter();
+
+  function openStudent(event: MouseEvent<HTMLTableRowElement>) {
+    if ((event.target as HTMLElement).closest("a, button, input, select, textarea")) {
+      return;
+    }
+    router.push(href);
+  }
+
+  return (
+    <tr className="student-table-row" onClick={openStudent}>
+      {children}
+    </tr>
+  );
+}

app/globals.css

@@ -12281,6 +12281,134 @@ html:is(.light, .dark) .notfound-digit-zero {
   background: color-mix(in srgb, var(--paper-blue) 55%, transparent);
 }
 
+.students-table-wrap {
+  overflow-x: clip;
+}
+
+.students-table {
+  width: 100%;
+  min-width: 0;
+  table-layout: fixed;
+}
+
+.students-table th,
+.students-table td {
+  padding-inline: clamp(8px, 0.8vw, 14px);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.students-table th:nth-child(1) {
+  width: 13%;
+}
+
+.students-table th:nth-child(2) {
+  width: 20%;
+}
+
+.students-table th:nth-child(3) {
+  width: 7%;
+}
+
+.students-table th:nth-child(4) {
+  width: 5%;
+}
+
+.students-table th:nth-child(5),
+.students-table th:nth-child(6) {
+  width: 10%;
+}
+
+.students-table th:nth-child(7) {
+  width: 11%;
+}
+
+.students-table th:nth-child(8) {
+  width: 7%;
+}
+
+.students-table th:nth-child(9),
+.students-table th:nth-child(10) {
+  width: 8.5%;
+}
+
+.student-table-row {
+  cursor: pointer;
+}
+
+.student-row-primary-link {
+  position: relative;
+  z-index: 1;
+  color: var(--color-text-strong);
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.student-row-primary-link:focus-visible {
+  outline: 2px solid var(--marker-cyan);
+  outline-offset: 4px;
+}
+
+@media (max-width: 1050px) {
+  .students-table-wrap {
+    overflow-x: visible;
+    padding: 12px 14px 16px;
+  }
+
+  .students-table,
+  .students-table tbody {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .students-table thead {
+    display: none;
+  }
+
+  .students-table tbody {
+    display: grid;
+    gap: 12px;
+  }
+
+  .students-table .student-table-row {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0;
+    padding: 10px;
+    border: 1.5px solid var(--ink-soft);
+    border-radius: 14px 11px 15px 10px;
+    background: var(--paper-raised);
+    box-shadow: var(--drawn-shadow-small);
+  }
+
+  .students-table td {
+    display: grid;
+    gap: 3px;
+    min-width: 0;
+    padding: 8px;
+    border: 0;
+  }
+
+  .students-table td::before {
+    content: attr(data-label);
+    color: var(--ink-muted);
+    font-family: var(--font-inter), "Inter", sans-serif;
+    font-size: 0.68rem;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+
+  .students-table td:nth-child(1),
+  .students-table td:nth-child(2) {
+    grid-column: 1 / -1;
+  }
+
+  .students-table td:nth-child(1) {
+    font-size: 1rem;
+  }
+}
+
 /* Preserve horizontal math scrolling without painting a scrollbar under every formula. */
 .statement-math-inline,
 .statement-math-block {