fix(stats): reorder leaderboard cards

This commit is contained in:
Adam 2026-06-12 08:26:18 -05:00
commit 4ddfa7c6fa
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
2 changed files with 9 additions and 23 deletions

View file

@ -1719,7 +1719,6 @@
[data-page="stats"] [data-component="leaderboard"], [data-page="stats"] [data-component="leaderboard"],
[data-page="stats"] [data-slot="leaderboard-featured"], [data-page="stats"] [data-slot="leaderboard-featured"],
[data-page="stats"] [data-slot="leaderboard-compact"], [data-page="stats"] [data-slot="leaderboard-compact"],
[data-page="stats"] [data-slot="leaderboard-column"],
[data-page="stats"] [data-slot="leaderboard-mobile"] { [data-page="stats"] [data-slot="leaderboard-mobile"] {
display: grid; display: grid;
} }
@ -1752,11 +1751,6 @@
-webkit-mask-size: 6px 6px; -webkit-mask-size: 6px 6px;
} }
[data-page="stats"] [data-slot="leaderboard-column"] {
gap: 8px;
align-content: start;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] { [data-page="stats"] [data-slot="leaderboard-mobile"] {
display: none; display: none;
} }

View file

@ -868,9 +868,7 @@ function Leaderboard(props: {
onActiveModelChange: (model: string | undefined) => void onActiveModelChange: (model: string | undefined) => void
}) { }) {
const featured = createMemo(() => props.data.slice(0, 3)) const featured = createMemo(() => props.data.slice(0, 3))
const columns = createMemo(() => const compact = createMemo(() => props.data.slice(3))
[0, 1, 2].map((index) => props.data.slice(3 + index * 5, 8 + index * 5)).filter((column) => column.length > 0),
)
return ( return (
<div id="leaderboard" data-component="leaderboard" role="list" aria-label="Model token leaderboard"> <div id="leaderboard" data-component="leaderboard" role="list" aria-label="Model token leaderboard">
@ -888,20 +886,14 @@ function Leaderboard(props: {
</div> </div>
<div data-slot="leaderboard-pattern" aria-hidden="true" /> <div data-slot="leaderboard-pattern" aria-hidden="true" />
<div data-slot="leaderboard-compact"> <div data-slot="leaderboard-compact">
<For each={columns()}> <For each={compact()}>
{(column) => ( {(entry) => (
<div data-slot="leaderboard-column"> <LeaderboardCard
<For each={column}> entry={entry}
{(entry) => ( size="compact"
<LeaderboardCard active={props.activeModel === entry.model}
entry={entry} onActiveModelChange={props.onActiveModelChange}
size="compact" />
active={props.activeModel === entry.model}
onActiveModelChange={props.onActiveModelChange}
/>
)}
</For>
</div>
)} )}
</For> </For>
</div> </div>