Fix navigation and table scrolling (#53)

rgbkrk · web-flow · commit e5a8ad09f416 · 2026-02-26T22:36:12.000Z
* Fix navigation and table scrolling behavior

- Replace router.push with next/link for proper cmd-click support
- Make table headers sticky (top: 0) with proper z-index layering
- Add max-height and overflow to DetailedMatrix for fixed viewport scrolling
- Wrap SummaryTable rows in Link components for accessible navigation
- Update KernelCard to accept href prop and wrap in Link when provided
- Remove useRouter dependency from content components

* Fix React key warning and tier header scrolling

- Import Fragment from React and use with key prop
- Remove colSpan from tier headers, render individual cells instead
- Tier labels stay sticky left while background cells scroll properly

* Use solid background for tier headers to prevent transparency bleed
diff --git a/site/app/components/CardsContent.tsx b/site/app/components/CardsContent.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import { Github, Table2, Grid3X3, LayoutGrid } from 'lucide-react';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { Header } from '@/components/Header';
@@ -12,7 +11,6 @@ interface CardsContentProps {
 }
 
 export function CardsContent({ data }: CardsContentProps) {
-  const router = useRouter();
 
   return (
     <TooltipProvider>
@@ -52,9 +50,7 @@ export function CardsContent({ data }: CardsContentProps) {
                 <KernelCard
                   key={report.kernel_name}
                   report={report}
-                  onClick={() => {
-                    router.push(`/kernel/${encodeURIComponent(report.kernel_name)}/`);
-                  }}
+                  href={`/kernel/${encodeURIComponent(report.kernel_name)}/`}
                 />
               ))}
             </div>
diff --git a/site/app/components/HomeContent.tsx b/site/app/components/HomeContent.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import { Github, Table2, Grid3X3, LayoutGrid } from 'lucide-react';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { Header } from '@/components/Header';
@@ -12,7 +11,6 @@ interface HomeContentProps {
 }
 
 export function HomeContent({ data }: HomeContentProps) {
-  const router = useRouter();
 
   return (
     <TooltipProvider>
@@ -47,12 +45,7 @@ export function HomeContent({ data }: HomeContentProps) {
             </nav>
 
             {/* Summary table */}
-            <SummaryTable
-              matrix={data}
-              onKernelClick={(name) => {
-                router.push(`/kernel/${encodeURIComponent(name)}/`);
-              }}
-            />
+            <SummaryTable matrix={data} />
           </div>
         </main>
 
diff --git a/site/src/components/ConformanceMatrix.tsx b/site/src/components/ConformanceMatrix.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Fragment } from 'react';
+import Link from 'next/link';
 import {
   Table,
   TableBody,
@@ -15,7 +17,6 @@ import { getAllTestNames, getPassedCount, getTotalCount, getTierScore, TIER_DESC
 
 interface ConformanceMatrixProps {
   matrix: MatrixType;
-  onKernelClick?: (kernelName: string) => void;
 }
 
 const TIERS: TestCategory[] = ['tier1_basic', 'tier2_interactive', 'tier3_rich_output', 'tier4_advanced'];
@@ -29,7 +30,7 @@ function getScoreColor(percentage: number): string {
 }
 
 /** Summary table showing tier scores for each kernel */
-export function SummaryTable({ matrix, onKernelClick }: ConformanceMatrixProps) {
+export function SummaryTable({ matrix }: ConformanceMatrixProps) {
   return (
     <div className="rounded-lg border border-ctp-surface0 overflow-x-auto bg-ctp-mantle">
       <Table>
@@ -51,39 +52,43 @@ export function SummaryTable({ matrix, onKernelClick }: ConformanceMatrixProps)
             const total = getTotalCount(report);
             const percentage = total > 0 ? Math.round((passed / total) * 100) : 0;
             const LanguageIcon = getLanguageIcon(report.kernel_name, report.language);
+            const href = `/kernel/${encodeURIComponent(report.kernel_name)}/`;
 
             return (
               <TableRow
                 key={report.kernel_name}
-                className={`border-ctp-surface0 ${onKernelClick ? 'cursor-pointer hover:bg-ctp-surface0/50' : ''}`}
-                onClick={() => onKernelClick?.(report.kernel_name)}
+                className="border-ctp-surface0 hover:bg-ctp-surface0/50"
               >
-                <TableCell className="font-medium pl-4">
-                  <div className="flex items-center gap-2.5">
+                <TableCell className="font-medium pl-4 p-0">
+                  <Link href={href} className="flex items-center gap-2.5 py-2 px-4">
                     <LanguageIcon className="h-5 w-5 flex-shrink-0" />
                     <div>
                       <div className="text-ctp-text">{report.kernel_name}</div>
                       <div className="text-xs text-ctp-subtext0">{report.implementation}</div>
                     </div>
-                  </div>
+                  </Link>
                 </TableCell>
-                <TableCell className="text-center font-mono text-sm text-ctp-lavender">
-                  {report.protocol_version}
+                <TableCell className="text-center font-mono text-sm text-ctp-lavender p-0">
+                  <Link href={href} className="block py-2 px-4">{report.protocol_version}</Link>
                 </TableCell>
                 {TIERS.map((tier) => {
                   const [tierPassed, tierTotal] = getTierScore(report, tier);
                   const tierPercent = tierTotal > 0 ? Math.round((tierPassed / tierTotal) * 100) : 0;
                   return (
-                    <TableCell key={tier} className={`text-center font-mono text-sm ${getScoreColor(tierPercent)}`}>
-                      {tierTotal > 0 ? `${tierPassed}/${tierTotal}` : '-'}
+                    <TableCell key={tier} className={`text-center font-mono text-sm ${getScoreColor(tierPercent)} p-0`}>
+                      <Link href={href} className="block py-2 px-4">
+                        {tierTotal > 0 ? `${tierPassed}/${tierTotal}` : '-'}
+                      </Link>
                     </TableCell>
                   );
                 })}
-                <TableCell className="text-center">
-                  <div className={`font-mono ${getScoreColor(percentage)}`}>
-                    {passed}/{total}
-                  </div>
-                  <div className={`text-xs ${getScoreColor(percentage)}`}>{percentage}%</div>
+                <TableCell className="text-center p-0">
+                  <Link href={href} className="block py-2 px-4">
+                    <div className={`font-mono ${getScoreColor(percentage)}`}>
+                      {passed}/{total}
+                    </div>
+                    <div className={`text-xs ${getScoreColor(percentage)}`}>{percentage}%</div>
+                  </Link>
                 </TableCell>
               </TableRow>
             );
@@ -118,15 +123,15 @@ export function DetailedMatrix({ matrix }: ConformanceMatrixProps) {
   }
 
   return (
-    <div className="rounded-lg border border-ctp-surface0 overflow-x-auto bg-ctp-mantle">
+    <div className="rounded-lg border border-ctp-surface0 overflow-auto bg-ctp-mantle max-h-[calc(100vh-280px)]">
       <Table>
-        <TableHeader>
+        <TableHeader className="sticky top-0 z-20 bg-ctp-mantle">
           <TableRow className="border-ctp-surface0 hover:bg-transparent">
-            <TableHead className="min-w-[200px] sticky left-0 bg-ctp-mantle text-ctp-subtext0">Test</TableHead>
+            <TableHead className="min-w-[200px] sticky left-0 z-30 bg-ctp-mantle text-ctp-subtext0">Test</TableHead>
             {matrix.reports.map((report) => {
               const LanguageIcon = getLanguageIcon(report.kernel_name, report.language);
               return (
-                <TableHead key={report.kernel_name} className="text-center min-w-[80px] text-ctp-subtext0 py-3">
+                <TableHead key={report.kernel_name} className="text-center min-w-[80px] text-ctp-subtext0 py-3 bg-ctp-mantle">
                   <div className="flex flex-col items-center gap-1.5">
                     <LanguageIcon className="h-5 w-5" />
                     <span className="text-xs">{report.kernel_name}</span>
@@ -142,20 +147,20 @@ export function DetailedMatrix({ matrix }: ConformanceMatrixProps) {
             if (testsInTier.length === 0) return null;
 
             return (
-              <>
+              <Fragment key={tier}>
                 {/* Tier header row */}
-                <TableRow key={`${tier}-header`} className="bg-ctp-surface0/30 hover:bg-ctp-surface0/30 border-ctp-surface0">
-                  <TableCell
-                    colSpan={matrix.reports.length + 1}
-                    className="font-semibold text-xs uppercase tracking-wide sticky left-0 bg-ctp-surface0/30 text-ctp-mauve"
-                  >
+                <TableRow className="bg-ctp-surface0 hover:bg-ctp-surface0 border-ctp-surface0">
+                  <TableCell className="font-semibold text-xs uppercase tracking-wide sticky left-0 z-10 bg-ctp-surface0 text-ctp-mauve">
                     {TIER_DESCRIPTIONS[tier]}
                   </TableCell>
+                  {matrix.reports.map((report) => (
+                    <TableCell key={report.kernel_name} className="bg-ctp-surface0" />
+                  ))}
                 </TableRow>
                 {/* Test rows */}
                 {testsInTier.map((testName) => (
                   <TableRow key={testName} className="border-ctp-surface0 hover:bg-ctp-surface0/30">
-                    <TableCell className="font-mono text-xs sticky left-0 bg-ctp-mantle text-ctp-text">
+                    <TableCell className="font-mono text-xs sticky left-0 z-10 bg-ctp-mantle text-ctp-text">
                       {testName}
                     </TableCell>
                     {matrix.reports.map((report) => {
@@ -172,7 +177,7 @@ export function DetailedMatrix({ matrix }: ConformanceMatrixProps) {
                     })}
                   </TableRow>
                 ))}
-              </>
+              </Fragment>
             );
           })}
         </TableBody>
diff --git a/site/src/components/KernelCard.tsx b/site/src/components/KernelCard.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Network } from 'lucide-react';
@@ -9,7 +10,7 @@ import { getPassedCount, getTotalCount, getTierScore, TIER_DESCRIPTIONS } from '
 
 interface KernelCardProps {
   report: KernelReport;
-  onClick?: () => void;
+  href?: string;
 }
 
 const TIERS: TestCategory[] = ['tier1_basic', 'tier2_interactive', 'tier3_rich_output', 'tier4_advanced'];
@@ -29,16 +30,15 @@ function getProgressColor(percentage: number): string {
   return 'bg-ctp-red';
 }
 
-export function KernelCard({ report, onClick }: KernelCardProps) {
+export function KernelCard({ report, href }: KernelCardProps) {
   const passed = getPassedCount(report);
   const total = getTotalCount(report);
   const percentage = total > 0 ? Math.round((passed / total) * 100) : 0;
   const LanguageIcon = getLanguageIcon(report.kernel_name, report.language);
 
-  return (
+  const cardContent = (
     <Card
-      className={`bg-ctp-mantle border-ctp-surface0 ${onClick ? 'cursor-pointer hover:border-ctp-mauve/50 hover:shadow-lg hover:shadow-ctp-mauve/5 transition-all' : ''}`}
-      onClick={onClick}
+      className={`bg-ctp-mantle border-ctp-surface0 ${href ? 'cursor-pointer hover:border-ctp-mauve/50 hover:shadow-lg hover:shadow-ctp-mauve/5 transition-all' : ''}`}
     >
       <CardHeader className="pb-2">
         <div className="flex items-start justify-between">
@@ -100,4 +100,14 @@ export function KernelCard({ report, onClick }: KernelCardProps) {
       </CardContent>
     </Card>
   );
+
+  if (href) {
+    return (
+      <Link href={href} className="block">
+        {cardContent}
+      </Link>
+    );
+  }
+
+  return cardContent;
 }
