feat(stats): improve mobile leaderboard layout

packages/stats/app/src/routes/index.css

@@ -1559,7 +1559,8 @@
 [data-page="stats"] [data-component="leaderboard"],
 [data-page="stats"] [data-slot="leaderboard-featured"],
 [data-page="stats"] [data-slot="leaderboard-compact"],
-[data-page="stats"] [data-slot="leaderboard-column"] {
+[data-page="stats"] [data-slot="leaderboard-column"],
+[data-page="stats"] [data-slot="leaderboard-mobile"] {
   display: grid;
 }
 
@@ -1592,6 +1593,10 @@
   gap: 8px;
 }
 
+[data-page="stats"] [data-slot="leaderboard-mobile"] {
+  display: none;
+}
+
 [data-page="stats"] [data-section="leaderboard"] [data-slot="chart-footer"] {
   margin-top: 32px;
 }
@@ -2024,8 +2029,12 @@
   height: 18px;
 }
 
+[data-page="stats"] [data-slot="session-heading"] strong {
+  flex: 0 0 56px;
+}
+
 [data-page="stats"] [data-slot="session-heading"] span {
-  flex: 0 0 210px;
+  flex: 0 0 150px;
 }
 
 [data-page="stats"] [data-slot="session-heading"] p {
@@ -2305,6 +2314,10 @@
     font-size: 96px;
   }
 
+  [data-page="stats"] [data-slot="session-heading"] {
+    display: none;
+  }
+
   [data-page="stats"] [data-slot="market-labels"],
   [data-page="stats"] [data-slot="market-bars"] {
     gap: 8px;
@@ -2383,6 +2396,57 @@
     display: none;
   }
 
+  [data-page="stats"] [data-slot="leaderboard-featured"],
+  [data-page="stats"] [data-slot="leaderboard-pattern"],
+  [data-page="stats"] [data-slot="leaderboard-compact"] {
+    display: none;
+  }
+
+  [data-page="stats"] [data-slot="leaderboard-mobile"] {
+    box-sizing: border-box;
+    display: flex;
+    gap: 12px;
+    width: calc(100% + 48px);
+    margin-inline: -24px;
+    padding-inline: 24px;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-padding-inline: 24px;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+  }
+
+  [data-page="stats"] [data-slot="leaderboard-mobile"]::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-page="stats"] [data-slot="leaderboard-mobile"] [data-component="leader-card"] {
+    flex: 0 0 240px;
+    width: 240px;
+    min-height: 156px;
+    gap: 32px;
+    scroll-snap-align: start;
+  }
+
+  [data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-body"] {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  [data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-avatar"] {
+    width: 28px;
+    height: 28px;
+    padding: 4px;
+    border-radius: 6px;
+  }
+
+  [data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-watermark"] {
+    right: -68px;
+    width: 240px;
+    height: 240px;
+  }
+
   [data-page="stats"] [data-component="top-models-chart"] {
     grid-template-rows: 40px minmax(0, 1fr);
     height: 400px;

packages/stats/app/src/routes/index.tsx

@@ -749,6 +749,9 @@ function Leaderboard(props: { data: LeaderboardEntry[] }) {
           )}
         </For>
       </div>
+      <div data-slot="leaderboard-mobile" aria-label="Scrollable model token leaderboard">
+        <For each={props.data}>{(entry) => <LeaderboardCard entry={entry} size="featured" />}</For>
+      </div>
     </div>
   )
 }
@@ -1184,9 +1187,10 @@ function SessionCostChart(props: {
   return (
     <div data-component="session-cost">
       <div data-slot="session-heading">
-        <span />
+        <strong aria-hidden="true" />
+        <span aria-hidden="true" />
         <p>COST / SESSION</p>
-        <p>TOKENS / SESSIONS</p>
+        <p>TOKENS / SESSION</p>
       </div>
       <For each={props.data}>
         {(item, index) => (