Skip to content

Commit 4b6b274

Browse files
andreakiroandreakiro
authored
fix(web): fit the leaderboard above the fold (#50)
* fix(web): fit the leaderboard above the fold * fix(web): move the Notte credit to the footer and stop chart legend labels wrapping * fix(web): lead the history provider selector with Notte
1 parent 2a88a45 commit 4b6b274

5 files changed

Lines changed: 23 additions & 19 deletions

File tree

‎web/app/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,9 @@ export default async function Home({
8484

8585
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
8686
<span className="text-sm text-muted-foreground">
87-
We&apos;re open-source and reproducible!<span className="hidden sm:inline"> Contribute.</span>
87+
We&apos;re open-source and reproducible!<span className="hidden sm:inline"> Contribute.</span>{' '}
88+
Built by{' '}
89+
<a href="https://notte.cc" target="_blank" rel="noopener noreferrer" className="text-foreground hover:underline">Notte</a>.
8890
</span>
8991
<div className="flex items-center gap-3 flex-wrap">
9092
<a

‎web/components/history-charts.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,11 @@ export function HistoryCharts({
304304
}))
305305
.filter((provider) => provider.points.length > 0)
306306
.sort((a, b) => {
307+
// Notte leads the selector; the rest stay ordered by value score.
308+
if (a.provider !== b.provider) {
309+
if (a.provider === "NOTTE") return -1;
310+
if (b.provider === "NOTTE") return 1;
311+
}
307312
const latestA = [...a.points].sort((x, y) => y.date.localeCompare(x.date))[0];
308313
const latestB = [...b.points].sort((x, y) => y.date.localeCompare(x.date))[0];
309314
const scoreA = latestA

‎web/components/leaderboard-table.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -542,12 +542,12 @@ export function LeaderboardTable({
542542
key={p.provider}
543543
className={`transition-none h-10 sm:h-12 ${isWinner ? "bg-primary/6 hover:bg-primary/10" : ""}`}
544544
>
545-
<TableCell className="text-center py-2.5">
545+
<TableCell className="text-center py-2">
546546
<span className="text-[0.65rem] text-muted-foreground">
547547
{rank}
548548
</span>
549549
</TableCell>
550-
<TableCell className="py-2.5">
550+
<TableCell className="py-2">
551551
<div className="flex flex-col gap-1 items-start">
552552
<div className="flex items-center gap-x-2 gap-y-0.5 flex-nowrap">
553553
{PROVIDER_LOGOS[p.provider] && (
@@ -579,18 +579,18 @@ export function LeaderboardTable({
579579
) : null}
580580
</div>
581581
</TableCell>
582-
<TableCell className="hidden sm:table-cell py-2.5 font-mono text-[0.82rem] text-foreground tabular-nums">
582+
<TableCell className="hidden sm:table-cell py-2 font-mono text-[0.82rem] text-foreground tabular-nums">
583583
{p.browserRegion ?? "—"}
584584
</TableCell>
585-
<TableCell className="hidden sm:table-cell py-2.5 text-right font-mono text-[0.82rem] text-foreground tabular-nums">
585+
<TableCell className="hidden sm:table-cell py-2 text-right font-mono text-[0.82rem] text-foreground tabular-nums">
586586
<span>{p.totalRuns.toLocaleString("en-US")}</span>
587587
{p.concurrency > 1 && (
588588
<span className="block text-[0.6rem] text-muted-foreground">
589589
{(p.totalRuns / p.concurrency).toLocaleString("en-US")} &times; {p.concurrency}
590590
</span>
591591
)}
592592
</TableCell>
593-
<TableCell className={`hidden sm:table-cell py-2.5 text-right ${sc("reliability")}`}>
593+
<TableCell className={`hidden sm:table-cell py-2 text-right ${sc("reliability")}`}>
594594
<div className="flex flex-col items-end h-[2.25rem] justify-center">
595595
<span className="font-mono text-[0.82rem] tabular-nums leading-tight text-foreground">
596596
{p.successRate.toFixed(1)}%
@@ -611,23 +611,23 @@ export function LeaderboardTable({
611611
return (
612612
<TableCell
613613
key={i}
614-
className={`hidden sm:table-cell py-2.5 text-right font-mono text-[0.82rem] text-foreground tabular-nums ${sc(segSortKeys[i])}`}
614+
className={`hidden sm:table-cell py-2 text-right font-mono text-[0.82rem] text-foreground tabular-nums ${sc(segSortKeys[i])}`}
615615
>
616616
{Math.round((p[key] as number)).toLocaleString("en-US")}
617617
</TableCell>
618618
);
619619
})}
620620
<TableCell
621-
className={`hidden sm:table-cell py-2.5 text-right font-mono text-[0.82rem] tabular-nums text-foreground ${sc("latency")}`}
621+
className={`hidden sm:table-cell py-2 text-right font-mono text-[0.82rem] tabular-nums text-foreground ${sc("latency")}`}
622622
>
623623
{Math.round(totalMs).toLocaleString("en-US")}
624624
</TableCell>
625-
<TableCell className={`hidden sm:table-cell py-2.5 text-right font-mono text-[0.82rem] tabular-nums text-foreground ${sc("cost")}`}>
625+
<TableCell className={`hidden sm:table-cell py-2 text-right font-mono text-[0.82rem] tabular-nums text-foreground ${sc("cost")}`}>
626626
{p.pricePerHour != null ? (
627627
<>${p.pricePerHour.toFixed(2)}/hr</>
628628
) : "—"}
629629
</TableCell>
630-
<TableCell className={`py-2.5 text-right font-mono text-[0.82rem] tabular-nums text-foreground ${sc("value")}`}>
630+
<TableCell className={`py-2 text-right font-mono text-[0.82rem] tabular-nums text-foreground ${sc("value")}`}>
631631
{(valueScores.get(p.provider) ?? 0).toFixed(3)}
632632
</TableCell>
633633
</TableRow>

‎web/components/page-shell.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ export function PageShell({
5050
</NavBarContent>
5151
</NavBar>
5252

53-
<main className="flex-1 mx-auto max-w-7xl w-full px-4 sm:px-10 pt-6 sm:pt-10 pb-5 sm:pb-10">
54-
<section className="mb-4 sm:mb-10">
53+
<main className="flex-1 mx-auto max-w-7xl w-full px-4 sm:px-10 pt-6 sm:pt-5 pb-5 sm:pb-10">
54+
<section className="mb-4 sm:mb-5">
5555
<div className="sm:hidden flex justify-center mb-3">
5656
<span className="rounded-[3px] bg-purple-500/15 px-3 py-1 text-[0.68rem] font-semibold text-purple-600 tracking-wide">
5757
Open site on desktop to see full evaluations
@@ -60,13 +60,10 @@ export function PageShell({
6060
<h1 className="hidden sm:block text-2xl sm:text-3xl font-semibold text-foreground tracking-tight">
6161
The Browser Arena
6262
</h1>
63-
<p className="mt-0 sm:mt-3 sm:max-w-2xl text-[0.78rem] sm:text-sm leading-relaxed text-muted-foreground">
63+
<p className="mt-0 sm:mt-2 sm:max-w-2xl text-[0.78rem] sm:text-sm leading-relaxed text-muted-foreground">
6464
Comparing cloud browser infrastructure providers{' '}
6565
<br className="sm:hidden" />
66-
on speed, reliability, and cost.{' '}
67-
<br className="hidden sm:block" />
68-
Open-source and reproducible on Railway. Built by{' '}
69-
<a href="https://notte.cc" target="_blank" rel="noopener noreferrer" className="text-foreground hover:underline">Notte</a>.
66+
on speed, reliability, and cost.
7067
</p>
7168
</section>
7269
{children}

‎web/components/ui/chart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ function ChartLegendContent({
281281
return (
282282
<div
283283
className={cn(
284-
"flex items-center justify-center gap-4",
284+
"flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-[0.7rem]",
285285
verticalAlign === "top" ? "pb-3" : "pt-3",
286286
className
287287
)}
@@ -297,7 +297,7 @@ function ChartLegendContent({
297297
<div
298298
key={item.value}
299299
className={cn(
300-
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
300+
"flex shrink-0 items-center gap-1.5 whitespace-nowrap [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
301301
)}
302302
>
303303
{itemConfig?.icon && !hideIcon ? (

0 commit comments

Comments
 (0)