Skip to content

Commit f0b72d1

Browse files
rgbkrkrgbkrk
authored
Fix dark mode scrollbars and improve layout (#68)
* Fix dark mode scrollbars and improve layout Add color-scheme property to respect system dark/light mode, improving scrollbar theming in both modes. Integrate navigation tabs into the header for better visual hierarchy. Replace container-constrained layout with max-w-screen-2xl for wider content area. Increase table cell padding in the detailed matrix for improved readability. * Fix nested anchor hydration error in KernelCard Change GitHub repository link from <a> to <button> with onClick handler to avoid invalid nested <a> tags when card is wrapped in a Link.
1 parent 485f25d commit f0b72d1

8 files changed

Lines changed: 111 additions & 124 deletions

File tree

‎site/app/components/CardsContent.tsx‎

Lines changed: 12 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { Github, Table2, Grid3X3, LayoutGrid } from 'lucide-react';
3+
import { Github } from 'lucide-react';
44
import { TooltipProvider } from '@/components/ui/tooltip';
55
import { Header } from '@/components/Header';
66
import { KernelCard } from '@/components/KernelCard';
@@ -22,50 +22,22 @@ export function CardsContent({ data }: CardsContentProps) {
2222
return (
2323
<TooltipProvider>
2424
<div className="min-h-screen bg-ctp-base flex flex-col">
25-
<Header generatedAt={data.generated_at} commitSha={data.commit_sha} />
25+
<Header generatedAt={data.generated_at} commitSha={data.commit_sha} currentPage="cards" />
2626

27-
<main className="container mx-auto px-4 py-8 flex-1">
28-
<div className="space-y-6">
29-
{/* Tab navigation */}
30-
<nav className="flex gap-1 text-sm">
31-
<a
32-
href="/kernel-testbed/"
33-
className="px-3 py-1.5 rounded-md flex items-center gap-1.5 text-ctp-subtext0 hover:text-ctp-text hover:bg-ctp-surface0/50"
34-
>
35-
<Table2 className="h-4 w-4" />
36-
Summary
37-
</a>
38-
<a
39-
href="/kernel-testbed/matrix/"
40-
className="px-3 py-1.5 rounded-md flex items-center gap-1.5 text-ctp-subtext0 hover:text-ctp-text hover:bg-ctp-surface0/50"
41-
>
42-
<Grid3X3 className="h-4 w-4" />
43-
Detailed Matrix
44-
</a>
45-
<a
46-
href="/kernel-testbed/cards/"
47-
className="px-3 py-1.5 rounded-md flex items-center gap-1.5 bg-ctp-surface0 text-ctp-text"
48-
>
49-
<LayoutGrid className="h-4 w-4" />
50-
Kernel Cards
51-
</a>
52-
</nav>
53-
54-
{/* Kernel cards grid */}
55-
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
56-
{sortedReports.map((report) => (
57-
<KernelCard
58-
key={report.kernel_name}
59-
report={report}
60-
href={`/kernel/${encodeURIComponent(report.kernel_name)}/`}
61-
/>
62-
))}
63-
</div>
27+
<main className="max-w-screen-2xl mx-auto px-4 py-4 flex-1 w-full">
28+
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
29+
{sortedReports.map((report) => (
30+
<KernelCard
31+
key={report.kernel_name}
32+
report={report}
33+
href={`/kernel/${encodeURIComponent(report.kernel_name)}/`}
34+
/>
35+
))}
6436
</div>
6537
</main>
6638

6739
<footer className="border-t border-ctp-surface0 bg-ctp-mantle">
68-
<div className="container mx-auto px-4 py-6 flex items-center justify-center gap-2 text-sm text-ctp-subtext0">
40+
<div className="max-w-screen-2xl mx-auto px-4 py-6 flex items-center justify-center gap-2 text-sm text-ctp-subtext0">
6941
<a
7042
href="https://github.com/runtimed/kernel-testbed"
7143
target="_blank"

‎site/app/components/HomeContent.tsx‎

Lines changed: 5 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { Github, Table2, Grid3X3, LayoutGrid } from 'lucide-react';
3+
import { Github } from 'lucide-react';
44
import { TooltipProvider } from '@/components/ui/tooltip';
55
import { Header } from '@/components/Header';
66
import { SummaryTable } from '@/components/ConformanceMatrix';
@@ -15,42 +15,14 @@ export function HomeContent({ data }: HomeContentProps) {
1515
return (
1616
<TooltipProvider>
1717
<div className="min-h-screen bg-ctp-base flex flex-col">
18-
<Header generatedAt={data.generated_at} commitSha={data.commit_sha} />
18+
<Header generatedAt={data.generated_at} commitSha={data.commit_sha} currentPage="summary" />
1919

20-
<main className="container mx-auto px-4 py-8 flex-1">
21-
<div className="space-y-6">
22-
{/* Tab navigation */}
23-
<nav className="flex gap-1 text-sm">
24-
<a
25-
href="/kernel-testbed/"
26-
className="px-3 py-1.5 rounded-md flex items-center gap-1.5 bg-ctp-surface0 text-ctp-text"
27-
>
28-
<Table2 className="h-4 w-4" />
29-
Summary
30-
</a>
31-
<a
32-
href="/kernel-testbed/matrix/"
33-
className="px-3 py-1.5 rounded-md flex items-center gap-1.5 text-ctp-subtext0 hover:text-ctp-text hover:bg-ctp-surface0/50"
34-
>
35-
<Grid3X3 className="h-4 w-4" />
36-
Detailed Matrix
37-
</a>
38-
<a
39-
href="/kernel-testbed/cards/"
40-
className="px-3 py-1.5 rounded-md flex items-center gap-1.5 text-ctp-subtext0 hover:text-ctp-text hover:bg-ctp-surface0/50"
41-
>
42-
<LayoutGrid className="h-4 w-4" />
43-
Kernel Cards
44-
</a>
45-
</nav>
46-
47-
{/* Summary table */}
48-
<SummaryTable matrix={data} />
49-
</div>
20+
<main className="max-w-screen-2xl mx-auto px-4 py-4 flex-1 w-full">
21+
<SummaryTable matrix={data} />
5022
</main>
5123

5224
<footer className="border-t border-ctp-surface0 bg-ctp-mantle">
53-
<div className="container mx-auto px-4 py-6 flex items-center justify-center gap-2 text-sm text-ctp-subtext0">
25+
<div className="max-w-screen-2xl mx-auto px-4 py-6 flex items-center justify-center gap-2 text-sm text-ctp-subtext0">
5426
<a
5527
href="https://github.com/runtimed/kernel-testbed"
5628
target="_blank"

‎site/app/globals.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,35 @@
11
@import "tailwindcss";
22
@import "@catppuccin/tailwindcss/mocha.css";
33

4+
html {
5+
color-scheme: light dark;
6+
}
7+
8+
/* Custom scrollbar styling - uses CSS vars that adapt to light/dark */
9+
::-webkit-scrollbar {
10+
width: 10px;
11+
height: 10px;
12+
}
13+
14+
::-webkit-scrollbar-track {
15+
background: var(--color-ctp-mantle);
16+
}
17+
18+
::-webkit-scrollbar-thumb {
19+
background: var(--color-ctp-surface2);
20+
border-radius: 5px;
21+
}
22+
23+
::-webkit-scrollbar-thumb:hover {
24+
background: var(--color-ctp-overlay0);
25+
}
26+
27+
/* Firefox */
28+
* {
29+
scrollbar-width: thin;
30+
scrollbar-color: var(--color-ctp-surface2) var(--color-ctp-mantle);
31+
}
32+
433
/* Map shadcn semantic colors to Catppuccin */
534
@theme {
635
--color-background: var(--color-ctp-base);

‎site/app/kernel/[name]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ export default async function KernelPage({ params }: KernelPageProps) {
6363
return (
6464
<TooltipProvider>
6565
<div className="min-h-screen bg-ctp-base">
66-
<Header generatedAt={data.generated_at} commitSha={data.commit_sha} />
66+
<Header generatedAt={data.generated_at} commitSha={data.commit_sha} currentPage="kernel" />
6767

68-
<main className="container mx-auto px-4 py-8">
68+
<main className="max-w-screen-2xl mx-auto px-4 py-4 w-full">
6969
<a
7070
href="/kernel-testbed/"
7171
className="mb-6 text-sm text-ctp-subtext0 hover:text-ctp-text transition-colors flex items-center gap-2"

‎site/app/matrix/page.tsx‎

Lines changed: 5 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Metadata } from 'next';
2-
import { Github, Table2, Grid3X3, LayoutGrid } from 'lucide-react';
2+
import { Github } from 'lucide-react';
33
import { TooltipProvider } from '@/components/ui/tooltip';
44
import { Header } from '@/components/Header';
55
import { DetailedMatrix } from '@/components/ConformanceMatrix';
@@ -20,42 +20,14 @@ export default async function MatrixPage() {
2020
return (
2121
<TooltipProvider>
2222
<div className="min-h-screen bg-ctp-base flex flex-col">
23-
<Header generatedAt={data.generated_at} commitSha={data.commit_sha} />
23+
<Header generatedAt={data.generated_at} commitSha={data.commit_sha} currentPage="matrix" />
2424

25-
<main className="container mx-auto px-4 py-8 flex-1">
26-
<div className="space-y-6">
27-
{/* Tab navigation */}
28-
<nav className="flex gap-1 text-sm">
29-
<a
30-
href="/kernel-testbed/"
31-
className="px-3 py-1.5 rounded-md flex items-center gap-1.5 text-ctp-subtext0 hover:text-ctp-text hover:bg-ctp-surface0/50"
32-
>
33-
<Table2 className="h-4 w-4" />
34-
Summary
35-
</a>
36-
<a
37-
href="/kernel-testbed/matrix/"
38-
className="px-3 py-1.5 rounded-md flex items-center gap-1.5 bg-ctp-surface0 text-ctp-text"
39-
>
40-
<Grid3X3 className="h-4 w-4" />
41-
Detailed Matrix
42-
</a>
43-
<a
44-
href="/kernel-testbed/cards/"
45-
className="px-3 py-1.5 rounded-md flex items-center gap-1.5 text-ctp-subtext0 hover:text-ctp-text hover:bg-ctp-surface0/50"
46-
>
47-
<LayoutGrid className="h-4 w-4" />
48-
Kernel Cards
49-
</a>
50-
</nav>
51-
52-
{/* Detailed matrix */}
53-
<DetailedMatrix matrix={data} />
54-
</div>
25+
<main className="max-w-screen-2xl mx-auto px-4 py-4 flex-1 w-full">
26+
<DetailedMatrix matrix={data} />
5527
</main>
5628

5729
<footer className="border-t border-ctp-surface0 bg-ctp-mantle">
58-
<div className="container mx-auto px-4 py-6 flex items-center justify-center gap-2 text-sm text-ctp-subtext0">
30+
<div className="max-w-screen-2xl mx-auto px-4 py-6 flex items-center justify-center gap-2 text-sm text-ctp-subtext0">
5931
<a
6032
href="https://github.com/runtimed/kernel-testbed"
6133
target="_blank"

‎site/src/components/ConformanceMatrix.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -135,15 +135,15 @@ export function DetailedMatrix({ matrix }: ConformanceMatrixProps) {
135135
}
136136

137137
return (
138-
<div className="rounded-lg border border-ctp-surface0 latte:border-ctp-surface1 overflow-auto bg-ctp-mantle latte:bg-ctp-base max-h-[calc(100vh-280px)]">
138+
<div className="rounded-lg border border-ctp-surface0 latte:border-ctp-surface1 overflow-auto bg-ctp-mantle latte:bg-ctp-base max-h-[calc(100vh-220px)]">
139139
<Table>
140140
<TableHeader className="sticky top-0 z-20 bg-ctp-mantle latte:bg-ctp-base">
141141
<TableRow className="border-ctp-surface0 latte:border-ctp-surface1 hover:bg-transparent">
142-
<TableHead className="min-w-[200px] sticky left-0 z-30 bg-ctp-mantle latte:bg-ctp-base text-ctp-subtext0">Test</TableHead>
142+
<TableHead className="min-w-[200px] sticky left-0 z-30 bg-ctp-mantle latte:bg-ctp-base text-ctp-subtext0 px-4 py-3">Test</TableHead>
143143
{sortedReports.map((report) => {
144144
const LanguageIcon = getLanguageIcon(report.kernel_name, report.language);
145145
return (
146-
<TableHead key={report.kernel_name} className="text-center min-w-[80px] text-ctp-subtext0 py-3 bg-ctp-mantle latte:bg-ctp-base">
146+
<TableHead key={report.kernel_name} className="text-center min-w-[90px] text-ctp-subtext0 px-3 py-3 bg-ctp-mantle latte:bg-ctp-base">
147147
<div className="flex flex-col items-center gap-1.5">
148148
<LanguageIcon className="h-5 w-5" />
149149
<span className="text-xs">{report.kernel_name}</span>
@@ -162,23 +162,23 @@ export function DetailedMatrix({ matrix }: ConformanceMatrixProps) {
162162
<Fragment key={tier}>
163163
{/* Tier header row */}
164164
<TableRow className="bg-ctp-surface0 latte:bg-ctp-surface1 hover:bg-ctp-surface0 latte:hover:bg-ctp-surface1 border-ctp-surface0">
165-
<TableCell className="font-semibold text-xs uppercase tracking-wide sticky left-0 z-10 bg-ctp-surface0 latte:bg-ctp-surface1 text-ctp-mauve">
165+
<TableCell className="font-semibold text-xs uppercase tracking-wide sticky left-0 z-10 bg-ctp-surface0 latte:bg-ctp-surface1 text-ctp-mauve px-4 py-2">
166166
{TIER_DESCRIPTIONS[tier]}
167167
</TableCell>
168168
{sortedReports.map((report) => (
169-
<TableCell key={report.kernel_name} className="bg-ctp-surface0 latte:bg-ctp-surface1" />
169+
<TableCell key={report.kernel_name} className="bg-ctp-surface0 latte:bg-ctp-surface1 px-3" />
170170
))}
171171
</TableRow>
172172
{/* Test rows */}
173173
{testsInTier.map((testName) => (
174174
<TableRow key={testName} className="border-ctp-surface0 latte:border-ctp-surface1 hover:bg-ctp-surface0/30 latte:hover:bg-ctp-mauve/10">
175-
<TableCell className="font-mono text-xs sticky left-0 z-10 bg-ctp-mantle latte:bg-ctp-base text-ctp-text">
175+
<TableCell className="font-mono text-xs sticky left-0 z-10 bg-ctp-mantle latte:bg-ctp-base text-ctp-text px-4 py-2">
176176
{testName}
177177
</TableCell>
178178
{sortedReports.map((report) => {
179179
const test = report.results.find((t) => t.name === testName);
180180
return (
181-
<TableCell key={report.kernel_name} className="text-center">
181+
<TableCell key={report.kernel_name} className="text-center px-3 py-2">
182182
{test ? (
183183
<TestResultIcon result={test.result} />
184184
) : (

‎site/src/components/Header.tsx‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { FlaskConical, GitCommit, Calendar } from 'lucide-react';
1+
import { FlaskConical, GitCommit, Calendar, Table2, Grid3X3, LayoutGrid } from 'lucide-react';
22

33
interface HeaderProps {
44
generatedAt?: string;
55
commitSha?: string;
6+
currentPage?: 'summary' | 'matrix' | 'cards' | 'kernel';
67
}
78

8-
export function Header({ generatedAt, commitSha }: HeaderProps) {
9+
export function Header({ generatedAt, commitSha, currentPage }: HeaderProps) {
910
const formattedDate = generatedAt
1011
? new Date(generatedAt).toLocaleDateString('en-US', {
1112
year: 'numeric',
@@ -18,7 +19,7 @@ export function Header({ generatedAt, commitSha }: HeaderProps) {
1819

1920
return (
2021
<header className="border-b border-ctp-surface0 bg-ctp-mantle">
21-
<div className="container mx-auto px-4 py-6">
22+
<div className="max-w-screen-2xl mx-auto px-4 py-6">
2223
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
2324
<a href="/kernel-testbed/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
2425
<div className="p-2 rounded-lg bg-ctp-mauve/10">
@@ -53,6 +54,45 @@ export function Header({ generatedAt, commitSha }: HeaderProps) {
5354
)}
5455
</div>
5556
</div>
57+
58+
{/* Navigation tabs */}
59+
{currentPage && currentPage !== 'kernel' && (
60+
<nav className="flex gap-1 text-sm mt-6">
61+
<a
62+
href="/kernel-testbed/"
63+
className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
64+
currentPage === 'summary'
65+
? 'bg-ctp-surface0 text-ctp-text'
66+
: 'text-ctp-subtext0 hover:text-ctp-text hover:bg-ctp-surface0/50'
67+
}`}
68+
>
69+
<Table2 className="h-4 w-4" />
70+
Summary
71+
</a>
72+
<a
73+
href="/kernel-testbed/matrix/"
74+
className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
75+
currentPage === 'matrix'
76+
? 'bg-ctp-surface0 text-ctp-text'
77+
: 'text-ctp-subtext0 hover:text-ctp-text hover:bg-ctp-surface0/50'
78+
}`}
79+
>
80+
<Grid3X3 className="h-4 w-4" />
81+
Detailed Matrix
82+
</a>
83+
<a
84+
href="/kernel-testbed/cards/"
85+
className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
86+
currentPage === 'cards'
87+
? 'bg-ctp-surface0 text-ctp-text'
88+
: 'text-ctp-subtext0 hover:text-ctp-text hover:bg-ctp-surface0/50'
89+
}`}
90+
>
91+
<LayoutGrid className="h-4 w-4" />
92+
Kernel Cards
93+
</a>
94+
</nav>
95+
)}
5696
</div>
5797
</header>
5898
);

‎site/src/components/KernelCard.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,18 @@ export function KernelCard({ report, href }: KernelCardProps) {
5151
<CardDescription className="text-ctp-subtext0 flex items-center gap-1.5">
5252
{report.implementation || report.language}
5353
{metadata?.repository && (
54-
<a
55-
href={metadata.repository}
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
onClick={(e) => e.stopPropagation()}
54+
<button
55+
type="button"
56+
onClick={(e) => {
57+
e.preventDefault();
58+
e.stopPropagation();
59+
window.open(metadata.repository, '_blank', 'noopener,noreferrer');
60+
}}
5961
className="text-ctp-overlay0 hover:text-ctp-blue transition-colors"
6062
title="View source on GitHub"
6163
>
6264
<Github className="h-3.5 w-3.5" />
63-
</a>
65+
</button>
6466
)}
6567
</CardDescription>
6668
</div>

0 commit comments

Comments
 (0)